html - 子菜单不显示

Question

我正在尝试为我的菜单制作子菜单，但有些地方不对，而且没有按我想要的那样弹出。

<div class="navbox">
<ul class="nav">
<li><a href="#">Program</a></li>
<li><ul>
<li><a href="#">Teknik</a></li>
<li><a href="#">Naturvetenskap</a></li>
<li><a href="#">El</a></li>
</ul></li>
</ul></div>

* { 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: 100px;
    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(border.png) 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 :hover {
 background: #ebebeb url(border.png) no-repeat;
 color: #67a5cd;
 padding: 7px 15px 7px 30px;
 }

代码的问题是我想获取“程序”链接以显示“Teknik”“Naturvetenskap”“El”下的子菜单，但我无法让它们弹出。我根本无法让它们弹出，这就是我所需要的，稍后我将不得不处理设计。

Answer 1

为您制作了代码笔 - http://codepen.io/anon/pen/pxfKE - 并试图回答我认为你在寻找什么。它应该是不言自明的，但如果您需要帮助理解它，请告诉我:)