html - sub-menu won't appear on hover -


i'm having hard time getting css make menu appear when mouse hovering on main menu items. how select submenu when main menu on hover?

html

      <ul class="mainnav">             <li><a href="">home</a></li>             <li class="dropdown"><a href="">treatments</a>                 <ul>                     <li><a href="">body treatments</a></li>                     <li><a href="">make up</a></li>                     <li><a href="">skincare</a></li>                 </ul>             </li>             <li><a href="">gallery</a></li>         </ul> 

css

.mainnav { height: 43px; list-style: none; } .mainnav li { float: left; position: relative; border-right: 1px solid #f0f986; font-size: 1.15em; height: 50px; list-style-type: none; } .mainnav li { text-decoration: none; padding: 13px 1.03em 10px; display: block; white-space: nowrap; font-size: 1.3em; font-weight: 600; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); } .mainnav li a:hover, .mainnav li a:focus { color: #dbeaa5; background: #404e11; } .mainnav span { font-size: 19px; position: relative; right: -5px; top: 2px; line-height: 1px; }  .dropdown ul { position: absolute; top: 43px; z-index: 100; visibility: hidden; } .dropdown ul li { background: none; text-align: left; display: block; } li li { width: 100%; } 

any assistance appreciated. i'm sure quite simple of you!

you can change visibility of submenu visible when hover on .dropdown list item:

.dropdown:hover ul {     visibility: visible; } 

fiddle demo


Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -