SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down menu position

    Hi all

    I have a demo here - http://www.ttmt.org.uk/drop/

    It's a simple <ul> list naviagtion. Buttons 2 and 3 have a drop down.

    The drop down menus appear on the right of the button below the next button.

    Why dose the drop down appear here. How can I get the drop down to appear under the when you roll over it.

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      
      <!--css-->
      
      <style type="text/css">
        
        *{
          margin:0;
          padding:0;
        }
        body{
          background:#eee;
          font-family:Helvetica, sans-serif;
        }
        
        nav{
          margin:50px;
        }
        nav ul li{
          display:inline;
          position:relative;
        }
        nav ul li a{
          float:left;
          display:block;
          padding:20px;
          background:#fff;
          text-decoration:none;
          margin:0 2px 0 0;
        }
        nav ul li ul{
          position:absolute;
          left:-999em;
        }
        nav ul li:hover ul{
          left:auto;
          left:-120px;
          top:58px;
        }
        nav ul li ul li a{
          background:red;
          float:none;
          color:#fff;
          margin:0 0 2px 0;
        }
        
      </style>
      
      
      
      <title>Title of the document</title>
      </head>
      
    <body>
      
      <nav>
        <ul>
          <li><a href="#">One</a></li>
          <li><a href="#">Two ></a>
            <ul>
              <li><a href="#">Two/One</a></li>
              <li><a href="#">Two/Two</a></li>
              <li><a href="#">Two/Three</a></li>
              <li><a href="#">Two/Four</a></li>
            </ul>
          </li>
          <li><a href="#">Three ></a>
            <ul>
              <li><a href="#">Three/One</a></li>
              <li><a href="#">Three/Two</a></li>
              <li><a href="#">Three/Three</a></li>
            </ul>
          </li>
          <li><a href="#">Four</a></li>
        </ul>
      </nav>
      
      
    </body>
    
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Setting the LIs to inline isn't helping you. Try this instead:

    Code:
    nav ul > li {
    display: block;
    position: relative;
    float: left;
    }


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
  •