Nav dropdown freaks out and shows different tabs - html

Question

I'm trying to create a navbar (already done) with a dropdown, but the dropdown keeps spazzing out when I hover over it :(
I made a JS Fiddle of what I've accomplished so far, and I was hoping for some help!
http://jsfiddle.net/kkpp6/
I think it might be due to the display: none; I used in one of the ul's or possibly due to a stupid typo but I can't figure out where!
As well as this, I can't figure out how to make a sub-menu for my sub-menus that already exist.. (so the desc tab has a submenu of swim squad which will also have a sub-menu of other things).. How would I do that? I can't figure out where I would start!
Cheers for all the help in advance!

Answer 1

Try like this: LINK
CSS:
.nav-wrap {
background-color: #125CC1;
text-align: center;
}
ul.navigation-bar li a {
color: #FFFFFF;
background-color: #125CC1;
text-align: center;
padding: 6px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
}
ul.navigation-bar li a:hover {
background-color: #06398F;
}
ul.navigation-bar {
text-align: left;
display: inline;
margin: 0;
list-style: none;
}
ul.navigation-bar li {
line-height:28px;
margin-right: -4px;
position: relative;
display: inline-block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #125CC1;
text-align: center;
}
ul.navigation-bar li ul {
padding: 0;
position: absolute;
top: 28px;
left: 0;
width: 120px;
-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;
}
ul.navigation-bar li ul li {
background: #125CC1;
display: block;
color: #fff;
}
ul.navigation-bar li ul li:hover {
background: #06398F;
color: #fff;
}
ul.navigation-bar li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Updated fiddle LINK
Multi-level dropdown menu LINK

Answer 2

On line 38, you set a list to display when the user hovers over a list item. This makes it visible, but also causes the entire menu to shift over so that you're no longer hovering over the list item that triggered that. If you use position:absolute on the list, it won't affect the other elements on the page:
ul.navigation-bar li > ul {
position:absolute;
}
JSFiddle: http://jsfiddle.net/P9SUg/

Answer 3

I also think its because of display:none;, instead of display:none; you should use visibility:hidden;.
and also add
ul.navigation-bar li > ul {
position:absolute;
}

Answer 4

You need to do lot of changes in CSS for making dropdown menu.
.nav-wrap {
background-color: #125CC1;
text-align: center;
}
ul.navigation-bar {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.navigation-bar > li {
display: inline;
position:relative;
}
ul.navigation-bar > li > a {
display: inline-block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #125CC1;
text-align: center;
padding: 4px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
ul.navigation-bar > li > a:hover {
background-color: #06398F;
}
ul.navigation-bar ul {
display: none;
}
ul.navigation-bar li:hover > ul {
display: block;
position:absolute;
top:23px;
background-color:#ff00ff;
z-index:10;
width:100%;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.navigation-bar li ul li a
{
list-type:none;
text-align: left;
font-weight:normal;
padding: 4px;
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
ul.navigation-bar li ul li:hover
{
background-color:#000;
}
ul.navigation-bar li ul li:hover a
{
color:#fff;
}
FIDDLE DEMO