Question

I am creating a vertical dropdown menu for a webpage. when i hover over the link, it works fine and changes color as specified. but as I move towards the right on li’s having sub level lists(“some text b” and “c” in the code), it goes back to its original color.
how do I solve this problem?

HTML markup:

<div id="vertical-menu">
    <ul class="top-level">
        <li><a href="#">Some text A</a></li>
        <li>
            <a href="#">Some text B</a>
            <ul class="sub-level">
                <li><a href="#">RSVP</a></li>
                <li><a href="#">Organizing Team</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Some text C</a>
            <ul class="sub-level">
                <li><a href="#">Events</a></li>
                <li><a href="#">Reunions</a></li>
            </ul>
        </li>
    </ul>
</div>​

CSS style:

#vertical-menu {
    padding: 10px 0;
    margin: 0 -14px;
    width: 250px;
}
#vertical-menu li {
    list-style: none;
    position:relative;
}
#vertical-menu a {
    padding: 10px;
    margin-right: 0;
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, from(#CD0000),           to(#8B0000));
    color: #FFFFFF;
    font-size: 1.05em;
}
#vertical-menu a:hover {
    background: url("Wood Texture 2.jpg") 100% 100%;
    color: #8B0000;
}
ul.sub-level {
    display:none;
    position:absolute;
    left:171px;
    top: 0;
}
.sub-level a {
    width: 200px;
}
li:hover .sub-level {display: block;}

To see a demo on jsfiddle: http://jsfiddle.net/fFzeS/

Answer 1

Use #vertical-menu li:hover > a instead of #vertical-menu a:hover (demo)

Edit:

Your real problem here is that the submenu overlaps the base menu – you need to remove the padding/margin from your ULs:

.vertical-menu ul { margin: 0; padding: 0; }

and adjust the left:171px; to left:250px;