Question

所以我正在开发一个网站，想知道如何将下拉列表转换为垂直列表。此刻，它水平地蜷缩在一起。这是代码。我想在＆＃34; services＆＃34;中列出清单。成为一个下拉列表。 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{

}

Answer 1

要实现这一点，首先必须将服务子菜单嵌套在其父导航项中。

像这样：

 <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以清除第一级浮动<li>＆＃39;

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在我提供的解决方案中，。parent类处理悬停事件的显示模式。所以你可以添加class =＆＃34; parent＆＃34;到父列表项并作为子菜单。此外，您需要以这种方式重新定位子ul：

<!DOCTYPE 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 class="parent">
                    <a href = "#">Services</a>
                    <div class="dropdown">
                        <ul id = "services">
                            <li>App Development</li>
                            <li>Web Development</li>
                            <li>Software Consulting</li>
                        </ul>
                    </div>
                </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;
}
.dropdown {
    display: none;
    top: -9999em;
    position: absolute;
    width: 180px;
}
.parent:hover .dropdown {
    display: block;
    top: auto;
}
#services li {
    display: block;
    padding: 10px 15px;
}

将水平列表更改为垂直列表

2 个答案: