Hey everyone, I've been struggling with the navigation on a website I'm currently developing. My goal is to have a fixed height for the navigation bar while still incorporating dropdown menus. Despite spending countless hours trying different solutions, I haven't been able to achieve the desired outcome.
The issue I'm facing is illustrated here: http://jsfiddle.net/88fYK/482/
CSS:
.top_nav {
background-image: url('images/navbg.gif');white-space:nowrap;
height:32px;
}
.top_nav #menu{
height:32px;
overflow:hidden;
}
.top_nav #menu ul{
float:left;
padding:0;
margin:0;
line-height:30px;
}
.top_nav #menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
.top_nav #menu ul li ul{
position:absolute;
display:none;
padding:0;
margin:0;
top:30px;
white-space:nowrap;
}
.top_nav #menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
.top_nav #menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
.top_nav #menu ul li:hover ul{
display:block;
z-index:1;
}
.top_nav #menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
.top_nav #menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}
HTML:
<div class="top_nav">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Video</a> <!--This is in main menu-->
<ul>
<li><a href="#">Technology</a></li> <!--This is in drop downmenu-->
<li><a href="#">Tutorial</a></li> <!--This is in drop downmenu-->
</ul>
</li>
<li><a href="#">link</a><ul>
<li><a href="#">sub</a></li> <!--This is in drop downmenu-->
<li><a href="#">sub</a></li> <!--This is in drop downmenu-->
</ul></li>
<li><a href="#">link</a><ul>
<li><a href="#">sub</a></li> <!--This is in drop downmenu-->
<li><a href="#">sub</a></li> <!--This is in drop downmenu-->
</ul></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul></div></div>
However, I need the dropdown menus to function like in this example: http://jsfiddle.net/88fYK/484/ (with the removal of 'overflow:hidden;')
The primary issues I encounter are: - The navigation wrapping (which is not acceptable) - The dropdown menus not working as intended I've experimented with various CSS properties such as float, position, and clearfix but haven't found a successful solution yet. Any assistance or guidance you can provide would be greatly appreciated.