所以我正在开发一个网站，想知道如何将下拉列表转换为垂直。目前它水平地挤在一起。这是代码。我想将“服务”中的列表设为下拉列表。 html
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<img src="logo.png" alt="Lion" style="width:150px;height:150px;">
<img src="logo2.png" alt="logo2" style="width:550px;height:150px;">
<div id = "Navigation">
<ul id = "nav-bars">
<li> <a href = "#" >Home</a></li>
<li> <a href = "#" >About Us</a></li>
<li> <a href = "#" >Download</a></li>
<li> <a href = "#" >Contact</a></li>
<li> <a href = "#" >Services</a></li>
</ul>
<ul id = "services">
<li>App Development</li>
<li>Web Development</li>
<li>Software Consulting</li>
</ul>
</div>
<div id = "registaration">
<a id = "Login" href = "#">Login</a>
<a id = "Signup" href = "#">Signup</a>
</div>
</body>
</html>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #BCD4E6;
}
li {
float: left;
}
@font-face {
font-family: "NavFont";
src: url("NavFont.ttf");
}
li a {
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a{
font-family: NavFont;
font-size: 20px;
text-decoration:none;
}
li a:hover {
background-color: #ACE5EE;
}
#registaration{
position:relative;
bottom:200px;
left:1300px;
}
#Login{padding:4px;}
#Signup{padding:4px;}
body{
overflow-x:hidden;
}
#services li{
}
最佳答案
要实现此目的，您首先必须将服务子菜单嵌套在其父导航项中。
像这样:
<ul id="nav-bars">
<li> <a href="#">Home</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Download</a></li>
<li> <a href="#">Contact</a></li>
<li class="dropdown"> <a href="#">Services</a>
<ul id="services">
<li>App Development</li>
<li>Web Development</li>
<li>Software Consulting</li>
</ul>
</li>
</ul>
然后您将必须更新菜单的一些样式。对于您的家长导航 <ul>样式(可能应该按 id 设置样式)您需要删除 overflow: hidden;允许显示子菜单，并添加 :after样式作为clearfix来清除 float 的第一级<li>的
#nav-bars {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #BCD4E6;
}
#nav-bars:after {
content: '';
display:block;
clear: both;
}
下一步添加position: relative;给您<li>这样您就可以将子菜单放置在其之外
li {
float: left;
position: relative;
}
下一步将子菜单设置为默认隐藏并仅在父级悬停时显示 <li>
li.dropdown:hover > ul {
display: block
}
#nav-bars > li.dropdown > ul {
display:none;
position: absolute;
top: 100%;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #BCD4E6
}
最后，对于您原来的问题，要使子菜单项垂直堆叠，只需删除 float:left;
#nav-bars > li.dropdown > ul > li {
float: none;
}
示例:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #BCD4E6;
}
ul:after {
content: '';
display:block;
clear: both;
}
li {
float: left;
position: relative;
}
li:hover > ul {
display: block
}
ul > li > ul {
display:none;
position: absolute;
top: 100%;
left: 0;
}
ul > li > ul > li {
float: none;
}
@font-face {
font-family: "NavFont";
src: url("NavFont.ttf");
}
li a {
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a {
font-family: NavFont;
font-size: 20px;
text-decoration: none;
}
li a:hover {
background-color: #ACE5EE;
}
#registaration {
position: relative;
bottom: 200px;
left: 1300px;
}
#Login {
padding: 4px;
}
#Signup {
padding: 4px;
}
body {
overflow-x: hidden;
height: 100%;
}
#services li {}<img src="logo.png" alt="Lion" style="width:150px;height:150px;">
<img src="logo2.png" alt="logo2" style="width:550px;height:150px;">
<div id="Navigation">
<ul id="nav-bars">
<li> <a href="#">Home</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Download</a></li>
<li> <a href="#">Contact</a></li>
<li> <a href="#">Services</a>
<ul id="services">
<li>App Development</li>
<li>Web Development</li>
<li>Software Consulting</li>
</ul>
</li>
</ul>
</div>
<div id="registaration">
<a id="Login" href="#">Login</a>
<a id="Signup" href="#">Signup</a>
</div>关于html - 将水平列表更改为垂直列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41642712/