Question

嗨伙计真的需要帮助，我的下拉菜单在悬停时不会保持可见，这可能无法正常工作，因为我将下拉菜单本身设置为表格列并设置为最小宽度900px而不是相同宽度作为其父级，但它是我可以做出比一个列宽更大的下拉列表的唯一方法。

我的HTML

＆＃13;

<!DOCTYPE html>



<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<link rel="stylesheet" href="global.css" type="text/css">

</head>
	<body id="body">
		
		<div class="wrap">
		
	<nav align="center">
		<ul id="ul">
			<li id="ulli"><a id="ullia" href="?page=home">home</a></li>
			<li id="ulli"><a id="ullia" href="?page=pests">pests</a>
				<ul>
					<li><a class="subhead">insects</a></li>
					<li><a class="sub" href="?page=ants">ants</a></li>
					<li><a class="sub" href="?page=b_bugs">bed bugs</a></li>
					<li><a class="sub" href="?page=bees">bees</a></li>
					<li><a class="sub" href="?page=c_roaches">cockroaches</a></li>
					<li><a class="sub" href="?page=fleas">fleas</a></li>
					<li><a class="sub" href="?page=flies">flies</a></li>
					<li><a class="sub" href="?page=moths">moths</a></li>
					<li><a class="sub" href="?page=mos">mosquitoes & Midges</a></li>
					<li><a class="sub" href="?page=sil">silverfish</a></li>
					<li><a class="sub" href="?page=spiders">spiders</a></li>
					<li><a class="sub" href="?page=wasps">wasps</a></li>
					<li><a class="sub" href="?page=w_worm">woodworm</a></li>
				</ul>
			</li>
			<li id="ulli"><a id="ullia" href="?page=pests">maintenance</a></li>
			<li id="ulli"><a id="ullia" href="?page=pests">about</a></li>
			<li id="ulli"><a id="ullia" href="?page=pests">contact us</a></li>
		</ul>
	</nav>
			
			
			<div class="header_bg" align="center">
				<div align="center" class="header">
					<div>
					</div>
				</div>
			</div>
			
		</div>
	
	</body>
</html>

＆＃13;

和我的css。

＆＃13;

#body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	}

.wrap {
	height:100%;
	width:100%;
	margin:0px;
	padding:0px;
	}
	

	
nav {
	width:100%;
	min-width:1000px;
	height:72px;
	margin:0;
	padding:0;
	float:left;
	background-image:url("images/nav_bg.jpg");
	z-index:4;
	}
	
#ul {
	max-width:180px;
	width:14.9%;
	text-align:center;
	display:inline;
	list-style:none;
	margin:0px;
	padding:0px 0px 0px 0;
	z-index:4;
	}
	
#ulli {
	width:180px;
	margin-top:24px;
	position:relative;
	display:inline-block;
	}
	
#ullia {
	list-style:none;
	font-family:calibri, arial;
	font-size:22px;
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;
	padding:20px;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	}
	
#ullia:hover {
	text-shadow:2px 2px 80px #fff;
	}
	
nav li ul {
	width:75%;
	min-width:900px;
	height:0px;
	top:20px;
	display:table-column;
	background: #fff;
	position:absolute;
	float:left;
	left:-100%;
	text-align:left;
	overflow:hidden;
	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
	padding-top:34px;
	padding-bottom:24px;
	-webkit-column-count:3;
	   -moz-column-count:3;
	    -ms-column-count:3;
		 -o-column-count:3;
	        column-count:3;
	-webkit-column-width:150px;
	   -moz-column-width:150px;
	    -ms-column-width:150px;
		 -o-column-width:150px;
	        column-width:150px;
	-webkit-column-rule:1px dotted #999;
	   -moz-column-rule:1px dotted #999;
	    -ms-column-rule:1px dotted #999;
		 -o-column-rule:1px dotted #999;
		    column-rule:1px dotted #999;
	 -webkit-box-shadow:1px 1px 6px #999;
	    -moz-box-shadow:1px 1px 6px #999;
	     -ms-box-shadow:1px 1px 6px #999;
	      -o-box-shadow:1px 1px 6px #999;
	         box-shadow:1px 1px 6px #999;
	visibility:hidden;
	z-index:-1;
	 -webkit-transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
         -ms-transition: all 0.6s ease-in-out;
          -o-transition: all 0.6s ease-in-out;
             transition: all 0.6s ease-in-out;
	}
	
nav li:hover ul {
	position:absolute;
	top:20px;
	opacity:1;
	height:183px;
	visibility:visible;
	}
	
.subhead {
	height:20px;
	padding-bottom:15px;
	font-family:calibri, arial;
	font-size:22px;
	text-transform:uppercase;
	color:#454545;
	}
	
.sub {
	padding-bottom:15px;
	font-family:calibri, arial;
	font-size:18px;
	text-transform:capitalize;
	color:#454545;
	list-style:none;
	text-decoration:none;
	padding-right:35px;
	}
	
.header_bg {
	width:100%;
	min-width:1000px;
	height:261px;
	float:top;
	top:72px;
	position:relative;
	background-image:url("images/header_bgr.jpg");
	z-index:-2;
	}
	
.header {
	width:1000px;
	min-width:1000px;
	height:261px;
	top:72px;
	position:initial;
	background-image:url("images/header.jpg");
	background-repeat:no-repeat;
	background-position:center;
	}

＆＃13;

Answer 1

这是下拉菜单的基本概念：

  li ul {display: none;} /*to hide the sub menu*/
  li:hover > ul {display: block;} /*to display the sub menu when on Hover */

根据您的代码，您应该这样做：

添加此内容：

li:hover>#ulli ul{
    display: block;
}

<强>更新：

<强> DEMO HERE

如果它想要碰撞主菜单，如下面的代码所示：

nav li:hover ul {
    position:absolute;
    top:20px;
    opacity:1;
    height:183px;
    visibility:visible;
}

例如，

将top:20px;更改为top:40px;。这将纠正外观。

更新2：

此外，没有href的昆虫链接！这是最终的 DEMO

css下拉菜单在悬停时不会保持打开状态

1 个答案: