0

我在这个下拉菜单中遇到了一些问题。我读了你的文章,它帮助了我。一开始,下拉菜单有效,但当我添加更多样式时,它停止工作。其他 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;
}

那么,为什么它不起作用以及可以做些什么呢?

4

1 回答 1

0

我发现这个菜单 CSS 是我最好的下拉菜单集合之一:

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

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

于 2013-07-17T03:59:46.053 回答