下拉菜单CSS [英] Dropdown Menu CSS
本文介绍了下拉菜单CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法弄清楚我的下拉菜单有什么问题。当我超过主级链接，下拉出现，但在我的屏幕左侧，而不是在主链接下面。
我已经在这里几个小时，任何帮助将非常感谢。
I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the main link. I have been on this for a couple of hours and any help would be greatly appreciated.
以下是html部分：
<div class="nav">
<ul id="menu">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Apetiziers</a>
<ul>
<li><a href="#">Sub-Link 1</a></li>
<li><a href="#">Sub-Link 2</a></li>
<li><a href="#">Sub-Link 3</a></li>
<li><a href="#">Sub-Link 4</a></li>
</ul>
</li>
<li><a href="#">Entree</a>
<ul>
<li><a href="#">Sub-Link 1</a></li>
<li><a href="#">Sub-Link 2</a></li>
<li><a href="#">Sub-Link 3</a></li>
<li><a href="#">Sub-Link 4</a></li>
</ul>
</li>
<li><a href="#">Main Course</a>
<ul>
<li><a href="#">Sub-Link 1</a></li>
<li><a href="#">Sub-Link 2</a></li>
<li><a href="#">Sub-Link 3</a></li>
<li><a href="#">Sub-Link 4</a></li>
</ul>
</li>
<li><a href="#">Dessert</a>
<ul>
<li><a href="#">Sub-Link 1</a></li>
<li><a href="#">Sub-Link 2</a></li>
<li><a href="#">Sub-Link 3</a></li>
<li><a href="#">Sub-Link 4</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
和.css：
ul#menu {
float: left;
margin: 0;
width: auto;
padding: 0px 40px 0px;
background: #333; color: #fff;
line-height: 100%;
}
ul#menu li {
display: inline;
}
/* top level link */
ul#menu a {
float: left;
padding: 10px 16px;
margin-right: 0px;
background: #789; color: #fff;
text-decoration: none;
border-right: 1px solid #e2e2e2;
}
/* main level link hover */
ul#menu a.current {
background: #f60; color: #fff;
}
ul#menu li:hover > a {
color: #fff; background: #ff4500;
text-decoration: underline;
}
/* dropdown */
ul#menu li:hover > ul {
display: block; /* shows the sub-menu (child ul of li) on hover */
}
/* sub level list */
ul#menu ul {
display: none; /* hides the sub-menu until you hover over it */
margin: 0;
padding: 0;
width: 140px;
position: absolute;
top: 35px;
left: 0;
background: #000;
border: solid 1px #ccc;
}
ul#menu ul li {
float: none;
margin: 0;
padding: 0;
}
ul#menu ul a {
font-weight: normal;
background: #9BB3BF; color: #036;
}
/* sub levels link hover */
ul#menu ul li a:hover {
color: #036; background: #DDDF99;
}
推荐答案
CSS风格，为什么不想这样做。为什么不试试这个CSS样式？
If you are free to change the CSS style, why not think of doing something like this. Why not try with this CSS style?
<ul class="nav">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
CSS
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
这篇关于下拉菜单CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
