纵向下拉菜单的疑惑
纵向下拉菜单的疑惑
sunshinewyf 发表于2年前
纵向下拉菜单的疑惑
  • 发表于 2年前
  • 阅读 43
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

我也是醉了,原本一个很简单的下拉菜单,也搞了那么久,原因仅仅是加了一个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>

显示的结果是:


找了好久的错误,也没找出来,不知道为什么第一个ul元素不能显示出自己的独立空间出来,即使设置了display:block也不行

最后把.parent-menu li的height样式去掉之后就好了,最后结果如下:


至今也不知道是为啥,望好心人给解答,真心觉得奇怪

共有 人打赏支持
粉丝 15
博文 97
码字总数 64205
×
sunshinewyf
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: