I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li
that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far - http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item"><a href="#">HOME</a></li>
<li id="top_menu_item"><a href="#">OUR SERVICES</a>
<ul><li id="top_menu_item"><a href="#">test</a></li></ul>
</li>
<li id="top_menu_item"><a href="#">EXAMPLES OF OUR WORK</a>
<ul><li id="top_menu_item"><a href="#">test</a></li></ul>
</li>
<li id="top_menu_item"><a href="#">CONTACT US</a></li>
</ul>
Remove position: relative;
from #top_menu_item
Set #top_menu_item ul
to position: absolute; left: 0;
instead
Remove left padding on #top_menu
with padding-left: 0;
Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul
tag relative to it's parent li
. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0;
to make sure it's completely left-aligned.
It's also against the standard to use an id
multiple times on a page. Therefore I'd recommend changing #top_menu_item
into .top_menu_item
and changing the HTML accordingly.
Let me know if you have any problems!