HTML/CSS drop down menu (hover) -
hi having trouble dropdown menu.
here html code
<div class="sticky-nav"> <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a> <div id="logo"> <a id="goup" href="index.html" title="cybersprint"></a> </div> <nav id="menu"> <ul id="menu-nav"> <li><a href="about.html" class="external">about us</a></li> <li><a href="solutions.html" class="external">solutions</a> <ul id="submenu-nav"> <li><a href="hits.html" class="external"> healthcare itsolutions</a></li> <li><a href="gits.html" class="external">government solutions</a></li> </ul> </li> <li><a href="solutions.html" class="external">services</a> <ul id="submenu-nav"> <li><a href="solutions.html" class="external">risk management</a></li> <li><a href="solutions.html" class="external">audit & assessment</a></li> <li><a href="solutions.html" class="external">disaster recovery & business continuity planning</a></li> </ul> </li> <li><a href="contact.html" class="external">contact</a></li> <li> <a href="javascript:popup()" class="external">login</a></li> </ul> </nav> </div>
and here css code
nav#menu { float: left; margin-left: 50px; margin-top: 10px; } nav#menu #menu-nav { margin: 0; padding: 0; } nav#menu #menu-nav li { list-style: none; display: inline-block; margin-left: 50px; } nav#menu #menu-nav li:first-child { margin-left: 0; } nav#menu #menu-nav li { color: #ffffff; font-size: 16px; font-weight: 300; line-height: 60px; display: block; text-transform: uppercase; } nav#menu #menu-nav li.current a, nav#menu #menu-nav li a:hover { color: #23aae1; } nav#menu #menu-nav li ul li { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } nav#menu #menu-nav li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } nav#menu #menu-nav li ul li { background: #666; }
thank
what problem having?
- you shouldn't put identical ids in 1 document.
the sub-menus shouldn't visible:
ul > li > ul { display: none; }
maybe looking for?
ul > li:hover > ul { display: block; }
this working example: http://codepen.io/anon/pen/gpjrov
Comments
Post a Comment