CSS drop-down menu menu not showing sub-menu on hover - html

Question

CSS drop-down menu not showing sub-menu on hover, but find out the actual problem. Below are the HTML and CSS. Please see fiddle.
It looks display: block; has no effect at all.
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>L-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>L-B
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
</ul>
</nav>

Answer 1

You are applying hover to the wrong element- use this:
.inline-menu > li:hover > ul{
display: block;
}
instead of .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>L-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>L-B
<ul>
<li>1</li>
<li>2</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>L-A
<ul>
<li>A
</li>
<li>B
</li>
</ul>
</li>
<li>L-B
<ul>
<li>C
</li>
<li>D
</li>
</ul>
</li>
</li>
</div>
</div>