SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop-Down Menu won't Drop-Down?

    So I'm working on navigation menu http://www.reversl.net/tests/ and I'm trying to include a simple drops menu when users hover over the 'you' menu item but I'm unable to get the sub- menu items to drop down. Currently it display inline, overlaying the primary menu items. Where am I going wrong?

    <ul id="nav-primary">
    <li class="search"> <input type="text" style="" name="search" placeholder="search" </li>
    <li class="about"><a href="#">NEWS</a></li>
    <li><a href="#"><img src="http://placehold.it/20x20" width="20px" height="20px" alt="" /> YOU ▼</a>

    <ul>
    <li><a href=#>PROFILE</a></li>
    <li><a href=#>SETTINGS</a></li>
    </ul>

    <li><a href="#">SIGN OUT</a></li>
    </ul><!--#nav-primary-->

    #nav-primary {
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
    }

    #nav-primary li {
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 50px;
    list-style: none;
    position: relative;
    }

    #nav-primary li:last-child a {
    border-right: 1px solid #222;
    }

    #nav-primary a {
    border-left: 1px solid #222;
    float: right;
    height: 50px;
    line-height: 1;
    padding: 40px 20px;
    text-decoration: none;
    }

    #nav-primary li ul {
    display: none;
    }

    #nav-primary li:hover ul {
    display: block;
    position: absolute;
    width: 200px;
    }

    #nav-primary li:hover ul li a {
    background: #333;
    color: #706f6f;
    display: block;
    border-bottom: 1px solid #222;
    border-right: none;
    }

    #nav-primary .search {
    /*padding: 10px;*/
    position: relative;
    }

    #nav-primary .search input {
    /*margin-top: 8px;*/
    background: #fafafa url(icon.png) 12px 12px no-repeat;
    border:1px solid #111;
    width: 250px;
    height: auto;
    padding:12px 10px 10px 35px;
    font-weight:normal;
    margin-right: 3em;
    }

    #nav-primary .search input:focus {
    outline:none;
    -moz-box-shadow: inset 0 0 5px #e0e0e0;
    -webkit-box-shadow: inset 0 0 5px #e0e0e0;
    box-shadow: inner 0 0 5px #e0e0e0;
    }

    textarea:focus, input:focus{
    outline: none;
    }

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I think it is needed top: and margin: to the UL with position:absolute;.
    Here's the code:
    Code:
    <ul id="nav-primary">
    <li class="search"> <input type="text" style="" name="search" placeholder="search"/> </li>
    <li class="about"><a href="#">NEWS</a></li>
    <li><a href="#"><img src="http://placehold.it/20x20" width="20px" height="20px" alt="" /> YOU ▼</a>
    
    <ul>
    <li><a href=€#€>PROFILE</a></li>
    <li><a href=€#€>SETTINGS</a></li>
    </ul>
    
    <li><a href="#">SIGN OUT</a></li>
    </ul><!--#nav-primary-->
    <style>
    #nav-primary {
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
    }
    
    #nav-primary li {
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    height: 50px;
    list-style: none;
    position: relative;
    }
    
    #nav-primary li:last-child a {
    border-right: 1px solid #222;
    }
    
    #nav-primary a {
    border-left: 1px solid #222;
    float: right;
    height: 50px;
    line-height: 1;
    padding: 40px 20px;
    text-decoration: none;
    }
    
    #nav-primary li ul {
    display: none;
    }
    
    #nav-primary li:hover ul {
    display: block;
    position: absolute;
    top:68px;
    margin:0;
    width: 200px;
    }
    
    #nav-primary li:hover ul li a {
    background: #333;
    color: #706f6f;
    display: block;
    border-bottom: 1px solid #222;
    border-right: none;
    }
    
    #nav-primary .search {
    /*padding: 10px;*/
    position: relative;
    }
    
    #nav-primary .search input {
    /*margin-top: 8px;*/
    background: #fafafa url(icon.png) 12px 12px no-repeat;
    border:1px solid #111;
    width: 250px;
    height: auto;
    padding:12px 10px 10px 35px;
    font-weight:normal;
    margin-right: 3em;
    }
    
    #nav-primary .search input:focus {
    outline:none;
    -moz-box-shadow: inset 0 0 5px #e0e0e0;
    -webkit-box-shadow: inset 0 0 5px #e0e0e0;
    box-shadow: inner 0 0 5px #e0e0e0;
    }
    
    textarea:focus, input:focus{
    outline: none;
    }
    </style>
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @marplo Thanks! I tried the above but it didn't work for me...

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,592
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, for one thing on the header element. Remove overflow:hidden. It will clip the drpodown. Use another clearing technique
    http://ryanreese.us/blog/Contain-And-Clear-Floats.php

    Such as clearfix.

    The dropdown now needs coordinates. It also needs the padding set to 0 to have it line up right. Also remove the height on the <li>'s. You're restricting the anchors. Their padding is causing it to overexceed 50px by a lot.
    Code:
    header{overflow:visible;}
    #nav-primary li ul{top:100%;left:0;padding:0}
    #nav-primary li{height:auto;}
    #nav-primary a{padding:30px 20px 0 20px}
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have overflow set on your header and you have given it a height so the dropdown will never show. Remove the overflow:hidden and either give your header a height to match the menu or use another float containing mechanism to contain the floated elements (e.g. header {width:100%;float:left}).

    You also need the top position as mentioned in the above post and probably the left position to zero also assuming the parent list is position:relative.

    You've also set the anchor to be 50px + 40px + 40px tall and the list parent that holds the anchor is only 50px high - how is that supposed to fit or was that your purpose to have overlaps?

    Rather than using display:none and display:block to hide and show the menu it is better for accessibility (and browsers bugs) to use margin-left :-999em to hide it and margin:0 to show it.

    I didn't really get what you were going for so couldn't offer more specific code

  6. #6
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Here's an example that works. You can try to addapt and create your menu starting from this example, or study it.
    Code:
    <style><!--
    #menuv {
     position:relative;
     padding:2px;
    }
    
      /* Properties for horizontal menu */
    #menuv li {
     float:left;
     margin:1px 8px;
     border:1px solid blue;
     background-color:#daedfe;
     padding:1px 2px;
     list-style-type:none;
     font-weight:600;
     text-align:left;
     text-decoration:nderline;
    }
    
      /* Properties for vertical menu */
    #menuv li:hover ul {
     display:block;
    }
    #menuv li ul {
     display:none;
     position:absolute;
     margin:1px auto 1px -8px;
     background-color:#f0f1fe;
     border:1px dashed blue;
     padding:1px;
    }
    #menuv li ul li {
     position:relative;
     clear:both;
     width:99%;
     margin:1px 0;
     border:none;
     background-color:#edfeed;
     padding:1px;
    }
    
      /* Links in sub-menu */
    #menuv ul li a {
     display:block;
     margin:0;
     font-weight:normal;
     padding:1px;
    }
    #menuv ul li a:hover {
     background-color:#fefefe;
     text-decoration:none;
     font-style:oblique;
    }
    --></style>
    
    <ul id="menuv">
     <li><a href="/" title="Home">Home</a></li>
     <li>CSS Tutorials
      <ul>
       <li><a href="/css/css3-new-background-properties_t Border properties">CSS3 Border properties</a></li>
       <li><a href="/css/css3-opacity_t opacity">CSS3 opacity</a></li>
      </ul>
     </li>
     <li>HTML Tutorials
      <ul>
       <li><a href="/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
       <li><a href="/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
       <li><a href="/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
      </ul>
     </li>
     <li><a href=/ex/contact title="Contact">Contact</a></li>
    </ul>
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  7. #7
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys , All solutions work perfectly! @marplo, thanks for the example above, which explains everything clearly. @ryanreese cheers for the link re: clearing floats.


Tags for this Thread

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
  •