html - DropDown menu has repeat issue on dropdown -
http://jsfiddle.net/just1end/btlxs/
if @ link above see drop down weird. first item of every drop down highlighted image.... , when hover on items (in dropdown) given image. can me figure out how can make dropdown peice remains red color , changes lighter red on hover. dont want image appear on first item. weird. first attempt @ drop down menu , help. thanks
code:
<html> <head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'> </script> <style> #cssmenu ul { list-style-type: none; position: relative; display: block; font-size: 12px; background: url(http://minecraft-serverlist.org/e-scape/bg.png) repeat-x top left; font-family: verdana, helvetica, arial, sans-serif; border: 1px solid #000; margin: 0; padding: 0; width: auto; } #cssmenu li { display: inline-block; margin: 0; padding: 0; } #cssmenu li ul { position: absolute; display: none; } #cssmenu li ul li { display: block; } #cssmenu li:hover ul { display: block; } #cssmenu li { display: block; color: #a79787; text-decoration: none; padding: 9px 15px; font-weight: normal; } #cssmenu li a:hover, #cssmenu .active { color: #fff; background: url(http://minecraft-serverlist.org/e-scape/bg.png) repeat-x top left; text-decoration: none; } #cssmenu .active { color: #fff; font-weight: 700; } #cssmenu ul { background-color: #b11718; } #cssmenu li a:hover, #cssmenu li.active { background-color: #de3330; } </style> </head> <body> <div id='cssmenu'> <ul> <li><a href='index.html'><span>home</span></a></li> <li><a href='team'><span>team</span></a> <ul> <li><a href='team'>team</a></li> <li><a href='team'>team2</a></li> <li><a href='team'>team3</a></li> </ul> </li> <li><a href='sponsors'><span>sponsors</span></a></li> <li><a href='first'><span>first</span></a></li> <li><a href='contact-us'><span>contact us</span></a></li> <li class='last'><a href='handouts'><span>handouts</span></a></li> </ul> </div> </body> </html>
first of need add background: red; or whatever color #cssmenu li ul declaration...currently setting background image on ul's first sub-ul receiving (cascading). need add whatever light red (i using orange example) hover effect li ul li declaration receives correct styling.
#cssmenu li ul { position: absolute; display: none; background: red; } #cssmenu li ul li a:hover { background: orange; }
Comments
Post a Comment