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;
}
MarPlo
April 17, 2012, 10:46am
2
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 ▼</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>
@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}
PaulOB
April 17, 2012, 11:28am
5
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
MarPlo
April 17, 2012, 12:49pm
6
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.