CSS Menu hover effect

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><a href="#">One</a>
            <ul>
                <li><a href="1.html">1.1</a></li>
                <li><a href="2.html">1.2</a>
            </ul>
        </li>
        <li><a href="#">Two</a>
            <ul>
                <li><a href="3.html">2.1</a></li>
                <li><a href="4.html">2.2</a></li>
                <li><a href="5.html">2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Three</a>
            <ul>
                <li><a href="6.html">3.1</a></li>
                <li><a href="7.html">3.2</a></li>
            </ul>
        </li>
        <li><a href="8.html">Four</a></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