繁体   English   中英

CSS的下拉菜单不起作用

[英]Dropdown menu with css not working

我在此下拉菜单中遇到了一些问题。 我读了你的文章,对我有帮助。 最初,下拉列表起作用,但是当我添加更多样式时,它停止起作用。 其他div和导航栏工作正常,但下拉菜单不起作用。 您能帮我指出此处应纠正的内容吗?

The parent div is nav-bar-left and the style is
.nav-bar-left {
float; left;
overflow: hidden;
width: 980px;
height: 26px;
background-color: Lavender;
border: 1px solid MidnightBlue;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
The navigation div is #horizontalmenu which resides within the above parent div and the style is
#horizontalmenu {
width: 733px;
margin: 0;
position: relative;
float: left;
padding: 0;
}
Rest of the styling for navigation bar is
#navbar {
list-style-type: none;
margin: 0;
width: 100%;
padding: 0;
position: relative;
display: inline-table;
height: 26px;
z-index: 5;
}
#navbar li {
float: left;
position: relative;
}
#navbar a:link, #navbar a:visited {
display: block;
color: #333;
background-color: lavender;
text-align: center;
padding: 6px 10px;
border-style: solid;
border-color: MidnightBlue;
border-width: 0 1px 0 0;
text-decoration: none;
font-size: 14px;
line-height: 14px;
}
#navbar a:hover, #navbar a:active {
color: #fff;
background-color: #6b0c36;
text-decoration: underline;
}
#navbar ul {
left:-9999px;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#navbar ul li {
float:none;
border-style: solid;
border-color: Lavender;
border-width: 0 1px 1px 1px;
}
#navbar ul a {
white-space: nowrap;
}
#navbar li:hover ul {
left: 0;
}
#navbar:hover a {
text-decoration: none;
}
#navbar li:hover ul a {
text-decoration: none;
background-color: Lavender;
color: #333;
}
#navbar li:hover ul li a:hover {
background-color: Lavender;
color: #333;
}

那么,为什么它不起作用?该怎么办?

我发现此菜单CSS是下拉菜单的最佳集合之一:

使用CSS创建一个多级下拉菜单,并通过jQuery对其进行改进

您可以在我的pastebin中找到这些代码的备份。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM