TheKapoosh
New Member
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:\[code\]<div id="vertical-menu"> <ul class="top-level"> <li><a href="http://stackoverflow.com/questions/13777049/#">Some text A</a></li> <li> <a href="http://stackoverflow.com/questions/13777049/#">Some text B</a> <ul class="sub-level"> <li><a href="http://stackoverflow.com/questions/13777049/#">RSVP</a></li> <li><a href="http://stackoverflow.com/questions/13777049/#">Organizing Team</a></li> </ul> </li> <li> <a href="http://stackoverflow.com/questions/13777049/#">Some text C</a> <ul class="sub-level"> <li><a href="http://stackoverflow.com/questions/13777049/#">Events</a></li> <li><a href="http://stackoverflow.com/questions/13777049/#">Reunions</a></li> </ul> </li> </ul></div>?\[/code\]CSS style:\[code\]#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;}\[/code\]To see a demo on jsfiddle: http://jsfiddle.net/fFzeS/