html - 将 元素添加到隐藏的 div 后，CSS 下拉菜单不起作用

Question

我为我的网站制作了一个 css 下拉菜单，基本上它是一个隐藏的 div <div id="category_list">与 display: none;最初设置的属性。一旦有人将鼠标悬停在 <li id="category_drop"><a class="st_nav_menu" href="#"> 上它设置了display: block;到隐藏的分区。它工作正常，但是一旦我添加 <a></a>隐藏 div 的标签全部下拉，东西停止工作，我不知道为什么。

这是 jsFidle，我的代码没有 <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"> ？

Answer 1

不应该关闭 </a>标签直接在类别文本之后，而不是在 <div id="category_list"></div> 之后.就目前而言，您可能会尝试将 anchor 置于 anchor 之中，这很可能就是问题所在。

所以...

<li id="category_drop"><a class="st_nav_menu" href="#">Categories 
    <div id="category_list"> 
    </div> 
</a></li> 

会是

<li id="category_drop"><a class="st_nav_menu" href="#">Categories</a> 
    <div id="category_list"> 
    </div> 
</li>