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

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

c++ - Clear the memory after returning a vector in a function -

erlang - Saving a digraph to mnesia is hindered because of its side-effects -