html - 创建下拉子菜单

Question

您好有人可以帮助我，我尝试创建一个下拉子菜单，但它对我不起作用。

我不知道如何制作精美的菜单。例子:当我将鼠标悬停在“按摩”上时，菜单必须下降并显示子菜单。

这里是CSS

.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;

HTML:

<div class="menu">
<ul>                                                                         
    <li class="aktivni-active"><a href="index.html">Home</a></li>
       <li><a href="massages.html">Massages</a></li>
			<ul>
				<li><a href="aanbiedingen.html">Aanbiedingen</a></li>
			</ul>	
	    <li><a href="aanbiedingen.html">Aanbiedingen</a></li>
	   <li><a href="prijzen.html">Prijzen</a></li>
       <li><a href="agenda.html">Agenda</a></li>

       <li><a href="contact.html">Contact</a></li>

</ul>
</div>

谁能告诉我如何在“按摩”上创建一个 dorpdown 子菜单

感谢

Answer 1

检查以下链接。

Fiddle

    /* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
 ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
 ul#menu li {
    position: relative;
}
/*sub menu*/
 ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
}
ul#menu li ul.sub-menu a {
    width:150px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
/* Top Nav Background Hover */
 ul#menu li a:hover {
    background:#000;
}
ul#menu li ul li a:hover {
    background:#999;
}
/* 3rd level nav */
 ul#menu li ul.sub-menu li ul {
    display:none;
    position: absolute;
    top: 0px;
    left: 115px;
    width: 100px;
}
/* show the 3rd level when the second is hover */
 ul#menu li ul.sub-menu li:hover ul {
    display:block;
}
/* Menu Dropdown */