Question

<html>

<head>

<style type="text/css">

   ul{
      list-style:none;
      padding:0;
      margin:0;


   }

   li{
      float: left; 
      border: dotted 1px;
      line-height: 30px; 
      color:green;
      width: 100px;

      }
    ul li ul li{
    color:violet;
    width: 150px;

    }

</style> 
</head>
<body> 
<ul id="wow">
   <li>example 1</li>
   <li>example 2
      <ul><li>example1</li>
      <li>example1</li><li>
      example1</li></ul>
   </li>
   <li>example 3
   <ul><li>example1</li>
      <li>example2</li>
      <li>example3</li></ul>
   </li>
   <li>example 4</li>
   <li>example 5</li>
   <li>example 6</li>
   <li>example 7</li>      
</ul>   
</body>   
</html>

这是我的代码。我的问题是为什么当我在css中设置列表的高度属性时，列表和子列表之间有重叠？我该如何解决？

Answer 1

您的子ul列表是主要li的子项，它正好在li项目之后开始。所以将该高度设为line-height。

    li{
      float: left; 
      border: dotted 1px;
      line-height: 30px; color:green
      }
    ul li ul li{color:violet /*write declaration for sub menu here*/}

<强> DEMO

希望这会有所帮助。将鼠标悬停在菜单项上以查看子菜单。

<强> DEMO 2

Answer 2

您的代码的问题是子项必须相对于其父项定位。要构建导航栏，请尝试以下操作：

 ul{
      list-style:none;
      padding:0;
      margin:0;          
   }

   li{
      float: left; 
      border: dotted 1px;
      height: 30px;
      position:relative;
   }

   ul li ul{
        position:absolute;
        top:100%;
   }

检查此demo。

Answer 3

检查一下：

li /* list and sub list */
{
  float: left; 
  border: dotted 1px;
  line-height: 30px; /* Instead of Height property */
}

ul>li>ul>li /* sub list */
{
   float: left; 
   border: dotted 1px;
   line-height:25px; /* give smaller height as you want */
}

要了解有关CSS选择器的更多信息，请通过此 Link 。

为什么在css中设置高度属性时列表重叠？

3 个答案: