Question

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

我不知道如何创建一个漂亮的菜单。例：当我将鼠标悬停在＆＃34;按摩＆＃34;然后菜单必须关闭并显示子菜单。

这里

＆＃13;

.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;

＆＃13;

HTML：

＆＃13;

<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>

＆＃13;

任何人都可以解释如何在＆＃34; Massages＆＃34;

上创建一个dorpdown子菜单

日Thnx

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 */

Answer 2

你应该改变你的标记，据我所知，子菜单应该是它引用的列表项的一部分

<ul>
<li class="simple-item">item</li>
<li class="submenu">item
    <ul class="submenu-goes-inside-li">
        <li class="simple-item">item</li>
        <li class="simple-item">item</li>
        <li class="simple-item">item</li>
    </ul>
</li>
</ul

在您的情况下，子菜单与列表项分开。

Answer 3

使用相同的结构，您只需在下拉菜单中添加类

在dropMenu中设置ul以显示none，然后显示on。您可以使用css3或jquery使其具有漂亮的动画或切换。

<div class="menu">
<ul>

    <li class="aktivni-active"><a href="index.html">Home</a></li>
    <li class="dropMenu"><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>

CSS

.menu ul {
显示：无
}
.menu：hover ul {
显示：块;
}

如果你想要更好一些，只需使用jquery http://api.jquery.com/toggle/

创建下拉子菜单

3 个答案: