Question

I’ve made a css drop down menu for my web, basically it is a hidden div <div id="category_list"> with display: none; property set initially. Once someone hovers over <li id="category_drop"><a class="st_nav_menu" href="#"> it sets display: block; to hidden div. It works fine, but once I add <a></a> tags to hidden div all drop down thing stops working and I have no idea why.

Here is jsFidle with my code withouth <a></a> tags inside <div id="category_list">
http://jsfiddle.net/JCZbt/ (Hover over “Categories” to see a drop down menu)

And this is my code.

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;
}

---

Can anyone suggest why drop down stops working once <a></a> tags are added to hidden <div id="category_list"> ?

Answer 1

shouldn’t the closing </a> tag be directly after the categories text and not after the <div id="category_list"></div>. As it stands you’d be trying to put anchors within anchors and that could well be the problem.

so…

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

would be

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