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;
    }

Hi,
I think it is needed top: and margin: to the UL with position:absolute;.
Here’s the 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 &#9660;</a>

<ul>
<li><a href=â&#8364;#â&#8364;>PROFILE</a></li>
<li><a href=â&#8364;#â&#8364;>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>

@marplo Thanks! I tried the above but it didn’t work for me…

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.


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}

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 :slight_smile:

Hi
Here’s an example that works. You can try to addapt and create your menu starting from this example, or study it.

<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>

Thanks guys , All solutions work perfectly! @marplo, thanks for the example above, which explains everything clearly. @ryanreese cheers for the link re: clearing floats.