CSS Dropdown-Menümenü zeigt kein Untermenü bei Hover

Question

CSS-Dropdown-Menü zeigt kein Untermenü bei Hover, aber finden Sie das eigentliche Problem. Im Folgenden finden Sie HTML und CSS. Bitte sehen Sie fiddle.

Es sieht display: block; hat keinen Effekt überhaupt.

body { 
 
    background-color: #eee; 
 
    padding: 0; 
 
} 
 
.inline-menu, 
 
.inline-menu ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.inline-menu > li { 
 
    display: inline-block; 
 
    padding-right: 25px; 
 
} 
 
.inline-menu a { 
 
    text-decoration: none; 
 
} 
 
.inline-menu > li > ul { 
 
    display: none; 
 
} 
 
.inline-menu > li > ul:hover { 
 
    display: block; 
 
}

<nav> 
 
    <span class="logo"></span> 
 

 
    <ul class="inline-menu left-menu"> 
 
    <li><a href="">L-A</a> 
 
     <ul> 
 
     <li><a href="">1</a> 
 
     </li> 
 
     <li><a href="">2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">L-B</a> 
 
     <ul> 
 
     <li><a href="">1</a> 
 
     </li> 
 
     <li><a href="">2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

Sie bewerben sich hover an die falsche Element- Verwendung dieses:

.inline-menu > li:hover > ul{ 
    display: block; 
} 

statt .inline-menu > li > ul:hover

body{ 
 
    background-color: #eee; 
 
    padding: 0; 
 
} 
 

 
.inline-menu, 
 
.inline-menu ul{ 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.inline-menu > li{ 
 
    display: inline-block; 
 
    padding-right: 25px; 
 
} 
 

 
.inline-menu a{ 
 
    text-decoration: none; 
 
} 
 

 
.inline-menu > li > ul{ 
 
    display: none; 
 
} 
 

 
.inline-menu > li:hover > ul{ 
 
    display: block; 
 
}

<nav> 
 
    <span class="logo"></span> 
 

 
    <ul class="inline-menu left-menu"> 
 
    <li><a href="">L-A</a> 
 
     <ul> 
 
     <li><a href="">1</a></li> 
 
     <li><a href="">2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">L-B</a> 
 
     <ul> 
 
     <li><a href="">1</a></li> 
 
     <li><a href="">2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#menu ul { 
 
    list-style: none; 
 
} 
 
#menu ul li { 
 
    float: left; 
 
    width: 150px; 
 
    height: 50px; 
 
    background-color: #0C3; 
 
    border: 1px solid #FFF; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    position: relative; 
 
} 
 
#menu ul li a { 
 
    color: #CC0; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 
#menu ul li a:hover { 
 
    background: #C30; 
 
    color: #FFF; 
 
} 
 
#menu ul ul { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
#menu ul li:hover> ul { 
 
    display: block; 
 
}

<div id="menu"> 
 
    <ul> 
 
    <li><a href="#">L-A</a> 
 
     <ul> 
 
     <li><a href="#">A</a> 
 
     </li> 
 
     <li><a href="#">B</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">L-B</a> 
 
     <ul> 
 
     <li><a href="#">C</a> 
 
     </li> 
 
     <li><a href="#">D</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </li> 
 
</div> 
 
</div>