我正在尝试为我的菜单制作子菜单,但有些东西不对,并没有像我想的那样弹出。
<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”下的子菜单,但我无法让它们弹出。我根本无法让它们弹出来,这就是我所需要的,我将不得不在以后处理设计。
答案 0 :(得分:0)
让它成为你的代码 - http://codepen.io/anon/pen/pxfKE - 并试图回答我认为你在寻找的东西。它应该是非常自我解释的,但如果你需要帮助理解它,请告诉我:))