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; }
Comments
Post a Comment