CSS Horizontal Dropdown positioning
I am trying to implement a horizontal navigation menu with a horizontal dropdown menu. I am trying to figure out how to center the horizontal dropdown text so it sits in the center开发者_开发问答 of the navigation container so the user doesn't have to move the mouse far left to reach the links.
<style type="text/css">
#nav-container {
padding: 4px;
width: 900px;
height: 60px;
background: #CCC;
}
#navbar {
margin:0;
padding:0;
}
#navbar li {
padding: 6px;
display: inline;
list-style: none;
}
#navbar li ul {
display: none;
position: absolute;
margin:0;
padding:0;
width: 900px;
}
#navbar li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="nav-container">
<ul id="navbar">
<li><a href="#">Link</a>
<ul>
<li><a href="#">Hello</a></li>
<li><a href="#">World</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Peace</a></li>
<li><a href="#">Love</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Smiles</a></li>
<li><a href="#">Cries</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Homer</a></li>
<li><a href="#">Peter</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Giggity</a></li>
<li><a href="#">Fapping</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Napster</a></li>
<li><a href="#">Myspace</a></li>
</ul>
</li>
</ul>
</div>
This is rough code just to show an example, here is a live example of the code.
Thanks
A combination of relative-absolute positioning should do the trick. I tried adding these two rules and that seemed to work:
#navbar li {
position: relative;
}
#navbar li ul {
position: absolute;
left: 0;
top: 24px; /* must me same as the height of parent li +/- a couple of pixels */
}
That seems to do the trick.
加载中,请稍侯......
精彩评论