CODEWITHSUNDEEP
phphtmlcss
Andrew Whatever
Andrew Whatever

Reputation: 368

2nd level of CSS dropdown menu not working correctly

I don't know how to explain this correctly, but I have a CSS menu on my site and the first layer of it works fine, when you hover over a menu item the list appears as a dropdown. But the sublists also appear instead of waiting for a hover. If you go here:

http://www.negativeworld.org/test.php

and hover over "main" you will see what I mean, "test 1" and "test 2" should only appear when "test" is hovered over, but instead they appear right away when "main" is hovered over.

Here is my CSS:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul {
    background-image: url(design/banner_menu_fd_excel.png);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 140px;
}

ul li {
    position: relative;
    z-index:100;
}

li ul {
    position: absolute;
    left: 0px;
    width: 140;
    display: none;
}

ul ul  ul { position: absolute; left: 100%; top: -1; z-index:100; }

li:hover {
    visibility: visible; 
}

li:hover ul, li.over ul { 
    display: block;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #000000;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

ul a:hover {
    color: #FFFFFF;
    background:#8A8987;
}

.user_box_name a {
    color: #000000;
    text-decoration: none;
}
.user_box_name a:hover {
    color: #000000;
    text-decoration: underline;
}

And here is my menu:

<ul id="nav">
    <li>
        <a href="content.php" id="mainmenulink2" onMouseOver="bt_main.src=menu_main_on.src" onMouseOut="bt_main.src=menu_main_off.src" onFocus="this.blur()"><img src='design/menu/menu_main.png' name="bt_main" width="130" height="32" border='0' id="bt_main"></a>

        <ul>
            <li>
                <a href="test.php">test</a>

                    <ul>
                        <li><a href="test.php">test 1</a></li>
                        <li><a href="test.php">test 2</a></li>
                    </ul>

                    <li><a href="content.php?tp=recenthot" class="menulink">Hottest (Recent)</a></li>
                    <li><a href="content.php?tp=alltimehot" class="menulink">Hottest (All-Time)</a></li>
                    <li><a href="content.php?tp=news" class="menulink">News</a></li>
                    <li><a href="content.php?tp=review" class="menulink">Reviews</a></li>
                    <li><a href="content.php?tp=editorial" class="menulink">Editorials</a></li>
                    <li><a href="content.php?tp=podcast" class="menulink">Podcasts</a></li>
                    <li><a href="content.php?tp=roundtable" class="menulink">Roundtables</a></li>
                    <li><a href="content.php?tp=top ten" class="menulink">Top Ten Lists</a></li>
                    <li><a href="content.php?tp=comic" class="menulink">Webcomics</a></li>
                    <li><a href="content.php?tp=game" class="menulink2">Game Discussions</a></li>
                    <li><a href="content.php?tp=poll" class="menulink">Public Polls</a></li>
                    <li><a href="content.php?tp=etc" class="menulink">Etcetera</a></li>

                    <!--<li><a href="comicchoose.php">Comics</a></li>-->
                </ul>
            </li>
        </ul>

I'm modifying code that the last programmer worked on so I'm not totally sure what I'm doing. I tried looking up the solution to this issue but I kept running into a wall. Does anyone know what the fix is?

Upvotes: 1

Views: 942

Answers (1)

Sowmya
Sowmya

Reputation: 26979

Add > after the li:hover

> selects the only first child (direct child) of the element. Your current code is saying to block (show) all ul on mouse over.

Check this for more information.

li:hover > ul, li.over > ul { 
    display: block;
}

DEMO

Upvotes: 5

Related Questions