Question

我是CSS新手并开发下拉菜单。但是当我将下拉列表添加到主列表中时，它会向左浮动。但我希望浮动到底部Like this任何人都可以请帮助我如何制作下拉列表向下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
    body
    {
        margin: 0;}
   #Header
    {
        position: fixed;
        border: 1px solid black;
        width: 100%;
        height: 150px;
        margin: 0%;
    }
      #logo
      {
          position: absolute;
          border: 1px solid black;
          width: 20%;
          height: 150px;
          margin: 0%;
      }
      #nav
      {
          position: absolute;
          border: 1px solid black;
          width: 79.5%;
          height: 50px;
          top: 65%;
          margin-left: 20.2%;
          background: transparent;

      }
      #nav ul
      {
          margin: 0;
          padding: 0;
      }
      #nav  ul  li
      {
          list-style: none;
          position:relative;
          float: left;
          margin:5px;

      }

      #nav  ul li a{
          text-decoration: none;
          display: block;
          padding: 10px 20px;
          color: black;
          font-size: 120%;
      }
      a:hover {
          background: gray;
          color:white;
          height: 30px;

      }
      #subList
      {
          margin: 0;
          padding: 0;
      }
    #subList  li
    {
        list-style: none;
        position:absolute;
        margin:5px;

    }
     /* #nav ul li ul
      {
          display: block;
          margin: 0px;
          padding: 0px;
      }
      #nav ul li ul li
      {
          list-style: none;
          position:relative;
          float: bottom;
      }
      #nav ul li ul li a
      {
          position:absolute;
          dispay:block;
          color: black;
          font-size: 120%;

      }
    /*  #nav ul li:hover>ul
      {
          display: block;
      }
    */
    </style>
</head>
<body>

<div id="Header">

<div id="logo"></div>

<div id="nav">
    <ul>
        <li><a href = "#">Home</a></li>
        <li><a href = "#">News</a>
        <ul id="subList">
            <li><a href = "#">news1</a></li>
            <li><a href = "#">news2</a></li>
            <li><a href = "#">news3</a></li>
            <li><a href = "#">news4</a></li>
            </ul>
        </li>
        <li><a href = "#">About us</a></li>
        <li><a href = "file:///C:/Users/dell/Desktop/Pract/Form.html">Sign     in</a></li>
    </ul>
</div>
</div>
</body>
</html>

Answer 1

您需要为nav的直接子项定义特异性。在您的情况下，这是将所有ul li设置为向左浮动。试试这个。

#nav > ul > li
  {
      list-style: none;
      position:relative;
      float: left;
      margin:5px;

  }

希望这对你有帮助！

Answer 2

这应该让你开始。

#nav {

     border: 1px solid black;

     width: 79.5%;

     height: 50px;

     top: 65%;

     margin-left: 20.2%;

     background: transparent;

   }

   #nav ul {

     margin: 0;

     padding: 0;

   }

   #nav ul li {

     list-style: none;

     position: relative;

     float: left;

     margin: 5px;

   }

   #nav ul li a {

     text-decoration: none;

     display: block;

     padding: 10px 20px;

     color: black;

     font-size: 120%;

   }

   a:hover {

     background: gray;

     color: white;


   }

   #subList {

     margin: 0;

     padding: 0;

     position: absolute;

     display: none;

     background: #fff;

     border: 1px solid #000;

   }

   #subList li {

     list-style: none;

     margin: 5px;

   }

   #nav ul li:hover > #subList {

     display: block;

     left: 0;

   }

<div id="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">News</a>
      <ul id="subList">
        <li><a href="#">news1</a>
        </li>
        <li><a href="#">news2</a>
        </li>
        <li><a href="#">news3</a>
        </li>
        <li><a href="#">news4</a>
        </li>
      </ul>
    </li>
    <li><a href="#">About us</a>
    </li>
    <li><a href="file:///C:/Users/dell/Desktop/Pract/Form.html">Sign     in</a>
    </li>
  </ul>
</div>

如何使无序列表浮动底部？

2 个答案: