CSS Menu hover effect - html

Question

I'm trying to create a hover effect in my drop down menu but I can't figure out how to do it.
What I want to do is this:
instead of this:
My Code - You can also see it here, (updated version)
HTML:
<nav>
<ul>
<li>One
<ul>
<li>1.1</li>
<li>1.2
</ul>
</li>
<li>Two
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Three
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
CSS:
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
}
nav ul li:hover {
background-color: #000;
}
nav ul li a:hover {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 15px;
color: #6F0;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
Any help will be appreciated.

Answer 1

Working fiddle:
Change the styles for the below two:
nav ul li:hover {
border-bottom: 1px solid #000;
color: #000;
}
nav ul li a:hover {
color: #000;
}
And add:
nav ul li:hover li:hover{
background: #000;
}
In order to style the sub-menus.
The first (li:hover) you want to set a bottom border - you can change the width of this border from 1px to something more thick, say, 3px