1

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

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

这是CSS，这似乎是问题所在

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

谢谢你尽你所能的帮助！

4

1 回答 1

2

您只需要将您的ul内部嵌套在 relvent 中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>标签。

于 2015-09-16T20:42:58.013 回答