Question

您好我正在尝试为我的网站创建一个嵌套下拉菜单，但是我遇到了这个错误，当我在每个主题的选项中进行编码时，下拉菜单会出现故障并且我不会＆＃ 39;不知道如何解决它。我不确定如何解决这个问题，非常感谢任何帮助。

＆＃13;

html,body{ 
	margin:0; 
	padding:0; 
	height:100%; 
	width:100%; 
	overflow: hidden;

}
body{
	padding: 0;
	margin: 0;
	font-family: 'Lato', Arial, sans-serif;
}

   #banner-container{
	width: 80%;
	height: 100%;
	margin: auto;
	overflow: hidden;
	
}

ul{
	margin: 0;
	padding: 0;
}
ul li{
	text-align: center;
}

ul li ul li{
	display:none;
}

ul li:hover ul li{
	display: block;
}
header{
	background-color: #595959;
	color: #fff;
	padding-top: 30px;
	min-height: 70px;
	border-bottom: 3px solid #FFD700;
}
header a{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
}

header li{
	float: left;
	display: inline;
	padding: 0 20px;
}

header .banner{
	float: left;
}

header .banner h1{
	margin: 0;
}

header nav{
	float: right;
	margin-top: 10px;
}

header a:hover{
	color: #ccc;
	font-weight: bold;
}

＆＃13;

    <!DOCTYPE html>

   </head>
<body>
	<header>
		<div id="banner-container">
			<div class="banner">
				<h1>A-Level</h1>
			</div>
			<nav>
				<ul>
					<li><a href="home.php">Home</a></li>
					<li><a href="#">A-level</a>
						<ul>
							<li><a href="#">Maths</a>
								<ul>
									<li><a href="#">PLC</a></li>
									<li><a href="#">Revision</a></li>
									<li><a href="#">Exam Papers</a></li>
								</ul>
							</li>
							<li><a href="#">Physics</a>
								<ul>
									<li><a href="#">PLC</a></li>
									<li><a href="#">Revision</a></li>
									<li><a href="#">Exam Papers</a></li>
								</ul>
							</li>
							<li><a href="#">Computer Science</a>
								<ul>
									<li><a href="#">PLC</a></li>
									<li><a href="#">Revision</a></li>
									<li><a href="#">Exam Papers</a></li>
								</ul>
							</li>	
						</ul>
					</li>
					<li><a href="index.php">TimeTable</a></li>
					<li><a href="logout.php">Logout</a></li>
				</ul>
			</nav>
		</div>
	</header>
</body>

＆＃13;

Answer 1

您的问题来自规则

header li{
    float: left;
    display: inline;
    padding: 0 20px;
}

这也适用于您的子导航项，float: left属性强制它们排列在标题的整个宽度上。将float:none;添加到您的规则ul li ul li可以解决此问题，但您可能还需要考虑添加最大宽度，以便您的布局保持一致。

嵌套下拉菜单错误

1 个答案: