Change layout on submenus - html

Question

I'm trying to make sub-menus for my menu, but something just isn't right and I cant seem to change the colour and layout of the submenus itself.
* { margin:0;
padding:0;
}
html {height: 100%;}
body{
position: relative;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
position: relative;
float: left;
}
ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: :;0px;
left: 100px;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
display: inline-table;
}
li {
margin: 5px 0 0 0;
}
ul.nav li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url() no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}
ul.nav li ul { display:none;
}
ul.nav li:hover ul {
display:block; }
<div class="navbox">
<ul class="nav">
<div class="navbox">
<ul class="nav">
<li>Program
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul></li>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
</div>
I've been looking at a guide, http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
If you look at the 4th picture, you'll see how I want my own dropdowns to look, even tho the code is there, I've tried to fix the problem myself. So the problem is, when I try to change the layout to look like the one on the 4th picture, it wont change thesubmenu dropdown layout, it'll just create a weird looking box under the boxlayout it self.
Thanks for help! :)

Answer 1

If you add position:absolute to your hovering it will start to work:
ul.nav li:hover ul {
display:block;
position:absolute;
}
Then add a background(-color) and some other styling and you can get to this example:
http://jsfiddle.net/w1ll3m/zz83R/1/ (based on your code)
Good luck!