html - 更改子菜单的布局

Question

我正在尝试为我的菜单制作子菜单，但有些地方不对，我似乎无法更改子菜单本身的颜色和布局。

* { 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><a href="#">Program</a>
  <ul>
<li><a href="#">Teknik</a></li>
<li><a href="#">Naturvetenskap</a></li>
<li><a href="#">El</a></li>
</ul></li>
  <li><a href="#">Nösnäs</a></li>
  <li><a href="#">Schema</a></li>
  <li><a href="#">Matsal</a></li>
   </ul>
 </div>

我一直在看指南，http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu如果你看第 4 张图片，你会看到我希望我自己的下拉菜单看起来如何，即使代码在那里，我也试图自己解决问题。所以问题是，当我尝试将布局更改为看起来像第 4 张图片中的布局时，它不会更改子菜单下拉布局，它只会在自己的框布局下创建一个看起来很奇怪的框。

感谢您的帮助! :)

Answer 1

如果您将 position:absolute 添加到您的悬停中，它将开始工作:

ul.nav li:hover ul { 
   display:block;
   position:absolute;
}

然后添加一个背景(-color)和一些其他样式，你可以得到这个例子:

http://jsfiddle.net/w1ll3m/zz83R/1/ (基于您的代码)

祝你好运!