有人能告诉我为什么这不起作用吗？ Css下拉菜单

Question

我正在尝试使用CSS创建一个下拉菜单，但它不起作用。谁能告诉我为什么？我尝试了几种不同的方式，并不想放下任何菜单。

＆＃13;

＆＃13;

 <nav id="primary_nav_wrap">
			<ul>
				<li class="current-menu-item"><a href="index.html">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Blog</a></li>
				<li id="performDrop"><a href="#">The Performer</a></li>
					<ul id="perform">
						<li class="subList"><a href="#">Resume</a></li>
						<li class="subList"><a href="#">Photos</a></li>
						<li class="subList"><a href="#">Videos</a></li>
					</ul>
				<li id="drinkDrop"><a href="#">The Drink-Smith</a></li>
					<ul id="drinks">
						<li class="subList"><a href="#">Wine of the Week</a></li>
						<li class="subList"><a href="#">Videos</a></li>
					</ul>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>

＆＃13;

＆＃13;

＆＃13;

这里似乎是问题所在的CSS

＆＃13;

＆＃13;

#primary_nav_wrap
{
	margin:0;
	text-align: left;
	width:600px;
	float:right;
	padding: 35px 20px 20px 0;
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:right;
	margin:0;
	padding:0
}

#primary_nav_wrap 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
}

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

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

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

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

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

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

#primary_nav_wrap  ul li:hover > ul
{
	display:block
}

＆＃13;

＆＃13;

＆＃13;

感谢您提供的任何帮助！

Answer 1

您只需将ul嵌套在相关内li：

中

<li id="performDrop"><a href="#">The Performer</a>
    <ul id="perform">
        <li class="subList"><a href="#">Resume</a>
        </li>
        <li class="subList"><a href="#">Photos</a>
        </li>
        <li class="subList"><a href="#">Videos</a>
        </li>
    </ul>
</li>

这是你的工作小提琴：http://jsfiddle.net/o4254bav/1/

我做的唯一更改是移动列表项</li>的结束标记以包含您的<ul>标记。