0
我为我的网站制作了一个css下拉菜单，基本上它是一个隐藏的div <div id="category_list">，最初的属性为display: none;。一旦有人悬停在<li id="category_drop"><a class="st_nav_menu" href="#">以上，它会将display: block;设置为隐藏div。它工作正常，但一旦我添加<a></a>标签隐藏div所有下拉的东西停止工作，我不知道为什么。CSS drop down is not working once <a> elements to hidden div
这里是jsFidle我的代码withouth的<a></a>标签内<div id="category_list"> http://jsfiddle.net/JCZbt/（鼠标悬停在“类别”中看到一个下拉菜单）
这是我的代码。
HTML
<div id="headbar-wrap">
<p id="back-top"><a href="#top"><span></span></a></p>
<div id="head-bar">
<h1><a href="http://website.com/">website</a></h1>
<ul class="main-menu">
<li><a class="st_nav_menu" href="index.php">Home</a></li>
<li id="category_drop"><a class="st_nav_menu" href="#">Categories
<div id="category_list">
</div>
</a></li>
<li><a class="st_nav_menu" href="top.php">Top</a></li>
<li><a class="st_nav_menu" href="anti-top.php">Anti Top</a></li>
<li class="st_add_button"><a href="#">Add Story</a></li>
</ul>
<ul class="main-2-menu">
<li><a><span style="color: red; font-weight: bold; font-size: 16px; line-height: 44px; padding: 0 10px 0 10px;">Website is under construction.</span></a></li>
</ul>
</div>
</div>
CSS
/* Header */
.st_add_button {
display: block;
padding: 15px 16px 15px 16px;
}
.st_add_button a {
color: #fff;
background: url("/images/st_add.png") no-repeat 4px 0 #3fab3c;
padding: 5px 5px 5px 37px;
text-shadow: 0 -1px #328c30;
font-weight: bold;
font-size: 12px;
line-height: 11px;
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.st_add_button a:hover {
background-color: #4dc24a;
}
#headbar-wrap {
background-color: #222;
min-width: 896px;
border-bottom: 1px solid #333;
border-top: 1px solid #333;
box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
position: fixed;
width: 100%;
z-index: 15;
top: 0;
}
#head-bar {
height: auto;
max-width: 896px;
margin: 0 auto;
}
#head-bar a {
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
}
#head-bar h1 {
float: left;
}
#head-bar h1 a {
display: block;
padding: 14px 18px 10px 0;
height: 20px;
line-height: 20px;
font-size: 18px;
width: 110px;
text-indent: -9999px;
overflow: hidden;
background: url("/images/logo.png") no-repeat 0 7px;
border-right: 1px solid #333;
box-shadow: -1px 0 #000 inset;
-moz-box-shadow: -1px 0 #000 inset;
-webkit-box-shadow: -1px 0 #000 inset;
}
#head-bar h1 a:hover {
background-position: 0 -64px;
}
#head-bar h1 a:active {
background-position: 0 -62px;
}
#head-bar ul {
list-style-type: none;
overflow: hidden;
}
#head-bar ul.main-menu {
float: left;
}
#head-bar ul.main-menu li{
float: left;
}
.st_nav_menu {
color: #999;
display: block;
font-weight: bold;
font-size: 12px;
line-height: 11px;
height: 10px;
padding: 17px 16px 17px 16px;
border-right: 1px solid #333;
box-shadow: -1px 0 #000 inset;
-moz-box-shadow: -1px 0 #000 inset;
-webkit-box-shadow: -1px 0 #000 inset;
text-shadow: 0 -1px #000;
}
#head-bar ul.main-menu li a:hover {
color: #fff;
text-shadow: 0 1px #000;
}
#head-bar ul.main-2-menu {
float: right;
overflow: visible;
border-left: 1px solid #000;
border-right: 1px solid #333;
}
#head-bar ul.main-2-menu li {
float: left;
height: auto;
border-left: 1px solid #333;
border-right: 1px solid #000;
}
/*CSS Drop Down */
#category_list {
display: none;
height: 200px;
width: 400px;
padding: 10px;
background: #1c1c1c;
position: absolute;
z-index: 999;
top: 45px;
margin-left: -211px;
border: 1px solid #000;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
box-shadow: 1px 1px 4px #333;
-moz-box-shadow: 1px 1px 4px #333;
-webkit-box-shadow: 1px 1px 4px #333;
}
#category_drop .st_nav_menu:hover #category_list, #johan {
display: block;
}
任何人都可以说明为什么下拉<a></a>标签的工作暂时停止添加到隐藏<div id="category_list">？
尝试过像你这样的建议，但下拉不现在工作，当我移动 – Ilja 2011-12-19 12:27:25
编辑的东西一个litle位现在它的工作，thnx））） – Ilja 2011-12-19 12:29:15