HTML/CSS drop down menu (hover) - html

Question

hi I am having trouble with my dropdown menu.
Here is the 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>About Us</li>
<li>Solutions
<ul id="submenu-nav">
<li> Healthcare ITSolutions</li>
<li>Government IT Solutions</li>
</ul>
</li>
<li>Services
<ul id="submenu-nav">
<li>Risk Management</li>
<li>Audit & Assessment</li>
<li>Disaster Recovery & Business Continuity Planning</li>
</ul>
</li>
<li>Contact</li>
<li> Login</li>
</ul>
</nav>
</div>
and here is the 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 a {
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 you

Answer 1

What is the problem that you are having?
You Shouldn't put identical ids in one document.
The sub-menus shouldn't be visible:
ul > li > ul {
display: none;
}
Maybe this is what you are looking for?
ul > li:hover > ul {
display: block;
}
This is a working example:
http://codepen.io/anon/pen/gpJrov

Answer 2

Again, you did not mention what the actual problem was here, but here are a few things I see wrong here...
1: even though you are not calling the ID's in your CSS, your HTML shows multiple elements with the same ID...you shouldn't do that.
2: you have
nav#menu #menu-nav li ul li { ... }
listed 3 times here.
- just add the third one with the first one...
- the second one is where you are having some of your problems.
for the your
nav#menu #menu-nav li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
block, you need to add :hover after the first li, else this isn't doing anything for you...
3: in your first
nav#menu #menu-nav li ul li { ... }
block, get rid of
visibility:hidden
and
opacity:0
they are not needed here...
after making these changes, I got your code to run just fine; though you will need to adjust the positioning of your nested lists...they are all the way to the left...
hope this helps.