0 
<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 中为列表设置高度属性时，列表和子列表之间存在重叠？我该如何解决这个问题

4

3 回答 3

2

您的 sub ul 列表是主要 li 的子项，即 y 它正好在 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*/}​

演示

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

演示 2

于 2012-11-30T07:08:55.027 回答
0

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

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

检查这个演示。

于 2012-11-30T07:07:53.943 回答
0

检查这个：

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 选择器的更多信息，请访问此链接。

于 2012-11-30T07:25:33.840 回答