html - 将水平列表更改为垂直列表-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 14:56:28

25

4

所以我在网站上工作，想知道如何将下拉列表转换为垂直列表。此刻它水平地聚集在一起。这是代码。我想将“服务”中的列表设为下拉列表。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样式作为清除第一级 float 的 clearfix <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/

25

4

0

文章推荐： javascript - 将 HandsonTable 连接到 MySQL 服务器

文章推荐： java - 带有注释的模式序列化也被序列化

文章推荐： c++ - STL 容器中的搜索元素

Python 这段代码做了什么？列表=列表[列表!=值]
如标题所示，ans_list是一个答案列表，ans_index是一个数字(答案在词汇表中的索引，但与atm无关) 这里生成的 tree.anslist 是什么？ (例如，仅针对第一个)，忽略迭代。 f
MySQL 列表 IN 列表
我目前将用户的输入存储在逗号分隔的列表中，如下所示: Userid | Options 1 | 1,2,5 用户在一个数组形式中勾选一组选项，然后用逗号连接起来 1,2,5 然后 MySQ
MySQL 列表 IN 列表
我目前将用户的输入存储在逗号分隔的列表中，如下所示: Userid | Options 1 | 1,2,5 用户在一个数组形式中勾选一组选项，然后用逗号连接起来 1,2,5 然后 MySQ
list - 我怎样才能完全展平一个列表(列表(列表)......)
我想知道如何完全展平列表和包含它们的东西。除其他外，我想出了一个解决方案，它可以将具有多个元素的东西滑倒并将它们放回原处，或者在滑倒后将具有一个元素的东西拿走。这与 How do I “flatte
list - 我怎样才能完全展平一个列表(列表(列表)......)
我想知道如何完全展平列表和包含它们的东西。除其他外，我想出了一个解决方案，它可以将具有多个元素的东西滑倒并将它们放回原处，或者在滑倒后将带有一个元素的东西拿走。这与 How do I “flatte
java - 列表<列表<字符串>>到字符串[][]
这个问题已经有答案了: Convert nested list to 2d array (3 个回答) 已关闭 7 年前。 java中有没有快捷方式可以转换 List> 到 String[][] ？
java - 列表<列表<对象>>排序
我在排序时遇到问题 List> 。我创建了一个自定义比较器，在其中编写了对数据进行排序的代码。 public class CustomComparator implements Comparator
java - 列表数组列表转换
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Java Generics: Cannot cast List to List? 我只是想知道为什么下面的java代
c# - 列表<逗号分隔的字符串> => 列表<字符串>?
试图想出一个 LINQy 方法来做到这一点，但我什么也没想到。我有一个对象列表<>，其中包含一个属性，该属性是逗号分隔的字母代码列表: lst[0].codes = "AA,BB,DD" lst[1
python - 列表 += 元组与列表 = 列表 + 元组
假设我有这些任务: points = [] point = (1, 2) 我怎么会这样做: points += point 它工作得很好，并且给了我点 = [1, 2]。但是，如果我这样做: poin
scala - 将列表[任务[列表[A]]]转换为任务[列表[A]]
如何在 scala 中将 List[Task[List[Header]]] 类型转换为 Task[List[Header]]。我有一个方法返回 Task[List[Header]] 并多次调用 do
java - 如何在Java中获取二维列表的元素？例如，列表<列表<整数>>
如何在 Java 中查找二维列表的元素？我有一个参数为 List> 的函数我想知道如何找到这个列表的行和列。最佳答案如果你喜欢 List> obj 然后你就可以像这样访问 obj.get(cur
java - 列表<列表没有按预期工作
分配 List到 List工作正常。分配 List>到 List>不编译。代码 public class Main { public static void main(String[] a
java - 列表<可序列化> vs 列表
我正在用 Java 编写一个方法，该方法必须接收并迭代 Serializable 的 List。有什么区别: public void myMethod(List list) { } 和 public
java - 通知网格/列表/树内网格/列表/树的更改
我看到很多人想用 mvvm 更新网格/列表/树的一部分，但他们不想刷新整个列表。对于所有遇到此问题的人，我做了以下示例。希望这对你有用。最佳答案这是一个简单的例子。整个代码中最重要的是: Bi
C++ 列表到 Python 列表
我正在为现有的 C++ 库编写包装器，该库使用列表，其中 T 是自定义结构。我被建议使用 vector 而不是列表，但我试图避免修改库。为了更好地理解这个场景，我做了一个简单的应用程序，使用一个列表
java - 列表 VS 列表<基础>
List list List list 这两种声明有什么区别吗？谢谢，最佳答案是的。 List可以包含所有派生自 Base 的不同事物的混合物. List包含同质项(从某种意义上说，它们必须全部
Java 泛型 : List, 列表<对象>、列表
有人可以尽可能详细地解释以下类型之间的区别吗？ List List List 让我更具体一点。我什么时候想使用 // 1 public void CanYouGiveMeAnAnswer(List l
python - 是否有任何 python 模块可以计算(列表，列表)元组的频率？
我有一个元组列表，每个元组都是一对列表。所以我的数据看起来像: mylist = [(['foo', 'bar'], ['bar', 'bar']),(['bar', 'bar'],['bar', '
list - 给定一个 (a * b) 列表，返回一个 (a * b list) 列表
也许是一个时髦的标题，但我遇到了以下问题: 给定一个类型为 (a * b) list 的列表，我想创建一个类型为 (a * b list) list 的新列表。一个例子: 给定列表 let testL

首页

博学

6Ren·AI

商城

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