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

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

html css

Html 将水平列表更改为垂直列表,html,css,Html,Css,所以我在一个网站上工作，想知道如何将下拉列表转换为垂直列表。目前，它是水平折叠在一起的。这是代码。我想让“服务”中的列表成为下拉列表。 Html 要实现这一点，首先必须将服务的子菜单嵌套在其父导航项中像这样： <ul id="nav-bars"> <li> <a href="#">Home</a></li> <li> <a href="#">About Us</a></li&

所以我在一个网站上工作，想知道如何将下拉列表转换为垂直列表。目前，它是水平折叠在一起的。这是代码。我想让“服务”中的列表成为下拉列表。 Html

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

像这样：

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

下一步添加

位置：相对

到您的

，这样您就可以将子菜单定位到它之外

li {
  float: left;
  position: relative;
}

下一步将您的子菜单设置为默认隐藏，并且仅在父菜单悬停时显示

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{
列表样式类型：无；
保证金：0；
填充：0；
背景色：#BCD4E6；
}
ul：之后{
内容：''；
显示：块；
明确：两者皆有；
}
李{
浮动：左；
位置：相对位置；
}
李：悬停>ul{
显示：块
}
ul>li>ul{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
}
ul>li>ul>li{
浮动：无；
}
@字体{
字体系列：“NavFont”；
src:url（“NavFont.ttf”）；
}
李阿{
显示：块；
颜色：橙色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
a{
字体系列：NavFont；
字体大小：20px；
文字装饰：无；
}
李娜：停下来{
背景色：#ACE5EE；
}
#登记{
位置：相对位置；
底部：200px；
左：1300px；
}
#登录{
填充：4px；
}
#报名{
填充：4px；
}
身体{
溢出x：隐藏；
身高：100%；
}
#服务li{}








应用程序开发
网络开发
软件咨询



在我提供的解决方案中，.parent类处理悬停事件时的显示模式。因此，您可以将class=“parent”添加到父列表项并将其作为子菜单。
此外，您需要通过以下方式重新定位子对象：
<!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>

您尝试检查现有的解决方案，如has？第一步是将您的“服务”ul
放入“服务”li
标签中。真正的问题是，如何创建下拉菜单？请在网上找到关于如何创建一个（有很多）的教程。这个问题以前已经回答过，很可能会被关闭。除非涉及到一些高级样式或行为，否则没有必要包装内部的
。当然，我只是尝试提供一个可扩展的解决方案。因此，“税收资助的宗教”在未来做更多的菜单时不会面临另一个问题。不管怎么说，这没什么大不了的，对吧？这有点反模式。放弃你的建议，一开始就尽可能地包装好每一个元素，以防将来可能需要它。如果将来需要重新设计/扩展/等菜单，则需要添加额外的标记。从基本功能的角度来看，不使用JS缓存元素引用“没什么大不了”，但这样做仍然是一个很好的做法，即使用jQuery$（el）
无处不在，而不是var$el=$（el）
，然后使用$el
，这样您就不用不断地查询DOM了。我建议OP的一个改进是使用CSS类来定义属于下拉列表的
上的样式，即
。这样，您就不必担心页面内容中出现的嵌套的
和
可能会受到用于下拉的样式的影响。@hungerstar我同意。。。还应使用id设置主导航（#导航条
）的样式，以避免弄乱页面上可能出现的其他。将更新答案
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
}

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

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

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