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?

  1. you shouldn't put identical ids in 1 document.
  2. 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

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -