CSS menu: dropdown items display as block - css

Question

Since I am discovering and struggling with CSS dropdown menus, I hope you won´t mind this simple question. I have a fully functioning CSS dropdown menu, but just after I prevented the horizontal menu from wrapping (in case the browser would be resized), I am having trouble displaying the dropdown items below each other (block). Instead they are now also displayed next to each other (inline-block).
Can anybody tell me which line I have to add? This was the code that I added that changed both my menu from wrapping (good) and my dropdown items from being displayed below each other:
nav ul li {
display: inline-block;
float: none;
}
Full CSS menu code:
/* Set general properties for main menu items */
nav ul {
background: linear-gradient(to bottom, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -moz-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -webkit-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -ms-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -o-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
padding: 0;
margin: 0;
font-size: 16px;
white-space: nowrap;
list-style: none;
position: relative;
text-align: left;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
display: inline-block;
float: none;
border-bottom: 3px solid #244612;
padding:0 0 0 7px;
}
/* Set hover properties for main menu items */
nav ul li:hover {
background: #e29a0e;
background: linear-gradient(to bottom, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -moz-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -webkit-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -ms-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -o-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li:hover ul li a{
color: #757575;
}
nav ul li a {
display: block;
padding: 10px 13px;
color: #757575;
text-decoration: none;
}
/* Set properties for hiding/unhiding dropdown items */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
/* Set general properties for dropdown menu items */
nav ul ul {
background: #F7F7F7;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-left: -7px;
font-size: 14px;
white-space: normal;
float: left;
}
/* Set hover properties for dropdown menu items */
nav ul ul li {
border-top: 1px solid #C9CCCF;
border-bottom: 0px solid #C9CCCF;
position: relative;
padding: 0;
}
nav ul ul li a {
padding: 10px 25px;
}
nav ul li:hover ul li a:hover {
background: #e29a0e;
color: #ffffff;
}

Answer 1

I hope that I understood your question correctly!
Here's a fiddle.
All you need to add is
nav ul li ul li{
display:block;
}
And that should be it!