Question

我试图让一个子菜单悬停几个小时，阅读大约十个教程或更多，最后没有让它工作。如果我悬停“酒店”等，我希望它在垂直菜单中显示“Zimmer”，“Reservierung”和“Preise”。这是我的代码：

a {
    text-decoration: none;}
nav {
	height: 50px;
	clear: both;}
nav ul {
	padding: 5px 0px;
	text-align: center;}
nav li {
	margin: 0px;
	display: inline;
	padding: 0px;}
nav li a {
	font-size: 18px;
	color: #775923;
	padding: 0px 20px;
	margin: 0px;}
nav li a:hover, nav li a.current {
	color: #775923;
    padding: 0px 20px 14px 20px;
	-webkit-padding-after: 15px;
	box-shadow: 0 4px #b1d130;}	
nav ul ul{
	display: none;}	
nav ul li:hover ul {
    display: block;}

<nav>
    	<ul>
            <li><a href="#" class="current">Willkommen</a></li> 
            <li><a href="#">Hotel</a></li>
            	<ul>
                    <li><a href="#">Zimmer</a></li>
                    <li><a href="#">Reservierung</a></li>
                    <li><a href="#">Preise</a></li>
                </ul>
            <li><a href="#">Restaurant</a></li>
            	<ul>
                    <li><a href="#">Speisekarte</a></li>
                    <li><a href="#">Anlässe</a></li>
                </ul>
            <li><a href="#">Anfahrt</a></li>
            <li><a href="#">Kontakt</a></li>
            	<ul>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Über Uns</a></li>
                </ul>        	       
       	</ul>
</nav>

链接：http://jsfiddle.net/AuJeF/445/

希望你能提供帮助。谢谢

Answer 1

你的错误。 ul＆gt; ul mast be insite li。但不是外面的

<li><a href="#">Hotel</a>
                <ul>
                    <li><a href="#">Zimmer</a></li>
                    <li><a href="#">Reservierung</a></li>
                    <li><a href="#">Preise</a></li>
                </ul>
</li>

你正在写风格 - 如果在里面的ul那么ul显示块。但在他里面没有它。将验证器错误，因为标签ul里面的＆gt; ul不是真的，只有＆gt; li 想想，我帮助你

Answer 2

你的标记有问题，改变如下 -

       <li><a href="#">Hotel</a>
            <ul>
                <li><a href="#">Zimmer</a></li>
                <li><a href="#">Reservierung</a></li>
                <li><a href="#">Preise</a></li>
            </ul>
        </li>

（这是一个简单的下拉菜单）

 <nav>
        <ul>
            <li><a href="#" class="current">Willkommen</a></li> 
            <li><a href="#">Hotel</a>
                <ul>
                    <li><a href="#">Zimmer</a></li>
                    <li><a href="#">Reservierung</a></li>
                    <li><a href="#">Preise</a></li>
                </ul>
            </li>
            <li><a href="#">Restaurant</a><ul>
                    <li><a href="#">Speisekarte</a></li>
                    <li><a href="#">Anlässe</a></li>
                </ul>
            </li> 
        </ul>
</nav>

<强> CSS

nav
{
    margin-top:15px
}

nav ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

nav ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

nav ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

nav ul li.current-menu-item
{
    background:#ddd
}

nav ul li:hover
{
    background:#f6f6f6
}

nav ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

nav ul ul li
{
    float:none;
    width:200px
}

nav ul ul a
{
    line-height:120%;
    padding:10px 15px
}

nav ul ul ul
{
    top:0;
    left:100%
}

nav ul li:hover > ul
{
    display:block
}

jsfiddle

子菜单悬停

2 个答案: