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

Question

So I am working on a website and want to know How I can convert the drop down list to be vertical. 因此，我在一个网站上工作，想知道如何将下拉列表转换为垂直列表。 At the moment it's clunked up together horizontally. 此刻，它水平合并在一起。 here is the code. 这是代码。 I want to make the list in "services" to be a drop down list. 我想使“服务”中的列表成为下拉列表。 Html 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 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

To achieve this, you will first have to put your submenu for services nested inside its parent nav item. 为此，您首先必须将子服务嵌套在其父导航项中。

Like this: 像这样：

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

Then you will have to update some styles for your menu. 然后，您将必须更新菜单的某些样式。 For your parent nav <ul> style (should probably style it by id) you will need to remove the overflow: hidden; 对于您的父nav <ul>样式（可能应该通过id设置样式），您将需要删除以下内容overflow: hidden; to allow the submenu to display, and add an :after style as a clearfix to clear the first level of floated <li> 's 允许子菜单显示，并添加:after样式作为clearfix来清除浮动<li>的第一级

#nav-bars {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #BCD4E6;
}

#nav-bars:after {
  content: '';
  display:block;
  clear: both;
}

Next add position: relative; 接下来添加position: relative; to your <li> so you can position the submenu off of it 到您的<li>因此您可以将子菜单置于其附近

li {
  float: left;
  position: relative;
}

Next style your submenu to be hidden by default and to only show on hover of the parent <li> 子菜单的下一个样式默认为隐藏，仅在父<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
}

And lastly, to your original question, to get the submenu items to stack vertically simply remove the float:left; 最后，对于您的原始问题，要使子菜单项垂直堆叠，只需删除float:left;

#nav-bars > li.dropdown > ul > li {
  float: none;
}

Example: 例：

 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>

Answer 2

In the solution I provided, .parent class handles the display mode on hover event. 在我提供的解决方案中，.parent类处理悬停事件时的显示模式。 So you can add class="parent" to parent list items and put as submenus. 因此，您可以将class =“ parent”添加到父级列表项并作为子菜单放置。 Also, you need to relocate the child ul this way: 另外，您需要通过以下方式重新定位孩子：

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

Also, modify your CSS as follows: 另外，按如下所示修改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 个解决方案

解决方案1
4 2017-01-13 20:28:03

解决方案2
1 2017-01-13 20:38:14

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

问题描述

2 个解决方案

解决方案1 4 2017-01-13 20:28:03

解决方案2 1 2017-01-13 20:38:14

解决方案1
4 2017-01-13 20:28:03

解决方案2
1 2017-01-13 20:38:14