How to get drop down menu sub lists to line up vertically

Question

When I hover over my first navigation link the sublists don't line up vertically underneath each other but are beside each other instead. How do I get them to be the same width as the top navigation display vertically when hovered over?

My HTML:

<nav>
        <ul>
            <li>
            <a href="fashion.html">fashion</a>
                <ul>
                    <li><a href="streetstyle.html">street style</a></li>
                    <li><a href="celebstyle.html">celebrity style</a></li>
                </ul>
            </li>
            <li><a href="beauty.html">beauty</a></li>
            <li><a href="music.html">music</a></li>
            <li><a href="entertainment.html">entertainment</a></li>
        </ul>
    </nav>

My CSS:

nav {
font-family: 'Josefin Sans', sans-serif;

}

nav li {
display:block;
width: 25%;
background-color: #000;
position:relative;
float:left;
list-style:none;
}

nav a {
text-decoration: none;
font-size: 17px;
color: white;
padding:6pt 0;
text-align: center;
display: block;
border-bottom: 3px white solid;
text-transform:uppercase;

} 
nav a:hover{
background: #d04576;
border-bottom: 3px white solid;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
 -ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;

}

nav ul li ul {
display:none;
width:100%;
}

nav li:hover ul {
display: block;
width:100%;
}

Answer 1

You are floating all of your li left.

Setting your nav li li to float: none; should do the trick. Try adding this to your css:

nav li li{
    float: none;
}

Edit: Here is a jsFiddle: http://jsfiddle.net/TscH5/3/

I added comments at the top to explain the few things I fixed.