纵向下拉菜单的疑惑

时间 2019-11-29

标签纵向下拉菜单疑惑繁體版

原文原文链接

我也是醉了，本来一个很简单的下拉菜单，也搞了那么久，缘由仅仅是加了一个css样式，我以前的代码是这样的：css

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>test</title>
   <style type="text/css">
        .parent-menu{
           list-style: none;
           height: 400px;
           width:500px;
           margin:0 auto;
           overflow: hidden;
        }
        .parent-menu li{
           background: #CCC none repeat scroll 0% 0%;
           border-bottom: 1px solid #FFF;
           display: block;
           height: 40px;
           line-height: 40px;
        }
        .parent-menu a{
           display: block;
           width: 100%;

        }
        .child-menu{
           width: 100%;
           display: block;
           list-style: none;
        }
   </style>
</head>
<body>
      <ul>
       <li><a href="">目录一</a>
             <ul>
                <li><a href="">目录二</a></li>
                <li><a href="">目录二</a></li>
                <li><a href="">目录二</a></li>
                <li><a href="">目录二</a></li>
             </ul>
       </li>
       <li><a href="">目录一</a></li>
       <li><a href="">目录一</a></li>
       <li><a href="">目录一</a></li>
      </ul>

</body>
</html>html

显示的结果是：spa

找了很久的错误，也没找出来，不知道为何第一个ul元素不能显示出本身的独立空间出来，即便设置了display:block也不行htm

最后把.parent-menu li的height样式去掉以后就行了，最后结果以下：it

至今也不知道是为啥，望好心人给解答，真心以为奇怪
test