Horizontales Dropdown menu
Hallo
Ich habe ein Horizontales Dropdown Menü erstellt und möchte, dass die Untermenüs beim Darüberfahren der Maus aufklappen.
Das klappt nicht ganz. Die 2. Ebene (Untermenü) klappt erst auf, wenn ich auf die 1. Menüebene klicke, also wenn es aktiv ist.
Meine Homepage ist leider noch nicht aufgeschaltet, es sollte aber so aussehen: http://proverzasca.ch/it/
Was habe ich falsch gemacht.
Vielen Dank für eure Hilfe
Der hier verwendete Code
<style>
#navigation {
width: 1000px;
height: 55px;
background-color: #4c4c4c;
}
#nav {
float: left;
width: 100%;
font-size: 20px;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav a {
display: block;
color: #fff;
text-decoration: none;
}
#nav ul li {
position: relative;
float: left;
list-style: none;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover {
background: #7aaba0;
}
#nav ul li a {
padding: 20px 50px 10px 30px;
}
#nav ul ul {
position: absolute;
background: #4c4c4c;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
#nav ul ul li {
float: none;
width: 200px;
border-bottom: 1px solid #fff;
}
#nav ul ul li a {
padding: 10px 20px;
font-size: 16px;
}
#nav ul li:hover > ul {
top: 100%;
left: 0;
display: block;
z-index: 1;
}
#nav ul ul li:hover > ul {
top: 0;
left: 200px;
}
#nav ul li.submenu > a:after {
position: relative;
float: right;
content: "";
margin-left: 10px;
margin-top: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-bottom: 5px solid transparent;
}
#nav ul ul li.submenu a:after {
margin-left: auto;
margin-right: -10px;
border-left: 5px solid #fff;
border-right: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
#nav ul ul li:last-child {
border-bottom: none;
}
</style>
<div id="navigation">
<div id="nav">
<ul>
<li><a href="http://www.script-tutorials.com/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a>
<ul>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
<li><a href="#">Submenu 1-4</a></li>
<li><a href="#">Submenu 1-5</a></li>
</ul>
</li>
<li><a href="#">Submenu 2</a>
<ul>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
<li><a href="#">Submenu 3</a>
<ul>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Submenu 4</a>
<ul>
<li><a href="#">Submenu 4-2</a></li>
<li><a href="#">Submenu 4-3</a></li>
<li><a href="#">Submenu 4-4</a></li>
<li><a href="#">Submenu 4-5</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a>
<ul>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
<li><a href="#">Submenu 2-2</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a>
<ul>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
<li><a href="#">Submenu 3-2</a>
<ul>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Submenu 41</a>
<ul>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
<li><a href="#">Submenu 42</a>
<ul>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="#">Submenu 51</a>
<ul>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
<li><a href="#">Submenu 51</a></li>
</ul>
<li><a href="#">Menu 6</a></li>
</div>
</div>