SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Down Menu does not look finished in Dreamweaver but preview looks fine

    Hi,

    If you paste this into a webpage like on Dreamweaver why does it not look very well designed. Is there more code that can make it look finished?

    I expect to see the finished horizontal navigation bar in Dreamweaver! It only looks properly when I preview it!?

    If it does not look properly in Dreamweaver, how can I design further parts of the website around it? I am new to drop down menus - but when I have done static horizontal menus they look fine in Dreamweaver so how can I get the design looking finished?


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style>
    body {
      font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      padding: 20px 50px 150px;
      font-size: 13px;
      text-align: center;
      background: #E3CAA1;
    }
    
    ul {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 15px 4px 17px 0;
      list-style: none;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }
    ul li {
      font: bold 12px/18px sans-serif;
      display: inline-block;
      margin-right: -4px;
      position: relative;
      padding: 15px 20px;
      background: #fff;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    ul li:hover {
      background: #555;
      color: #fff;
    }
    ul li ul {
      padding: 0;
      position: absolute;
      top: 48px;
      left: 0;
      width: 150px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -transition: opacity 0.2s;
    }
    ul li ul li { 
      background: #555; 
      display: block; 
      color: #fff;
      text-shadow: 0 -1px 0 #000;
    }
    ul li ul li:hover { background: #666; }
    ul li:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
    }
    
     </style> - See more at: http://www.csstutorial.net/css_misc_inserting.php#sthash.eYXuZ280.dpuf
    </head>
    
    <body>
    <ul><li>Home</li>
      <li>About</li>
      <li>
        Portfolio
        <ul>
          <li>Web Design</li>
          <li>Web Development</li>
          <li>Illustrations</li>
        </ul>
      </li>
      <li>Blog
      <ul>
          <li>Web Design</li>
          <li>Web Development</li>
          <li>Illustrations</li>
        </ul>
      </li>
      <li>Contact</li>
    </ul>
    <p>This is some text </p>
    </body>
    </html>
    Thanks,

    Matt.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,608
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    You have some stray text on line 75 to the right of the close style tag </style>
    and there is a stray dash in front of "transition" on line 60.

    Dreamweaver is not a browser and therefore does not render pages very accurately. The best way to evaluate the performance of your code is to view it in a real browser. Dreamweaver has a nice editor, but it is not a browser.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •