文档章节

纵向下拉菜单的疑惑

sunshinewyf
 sunshinewyf
发布于 2015/11/30 10:11
字数 284
阅读 45
收藏 0

我也是醉了,原本一个很简单的下拉菜单,也搞了那么久,原因仅仅是加了一个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样式去掉之后就好了,最后结果如下:


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

© 著作权归作者所有

共有 人打赏支持
sunshinewyf
粉丝 16
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
Balsamiq Mockups UI控件名中英文对照

Balsamiq Mockups 是最近两年广受欢迎的互联网产品原型设计工具。虽然这款工具的名字很难读,不过它的易用程度超过了同类的原型工具。Balsamiq Mockups适合绘制早期的产品草图,例如你的灵感...

凯文加内特
2014/04/04
0
0
一款简洁而高效的Arduino开发工具 - Buddy++

版本更新至:v 1.1.1 beta 更换核心代码编辑器,界面更加友好,支持可视化主题更换,文本样式自定义。 优化编译和烧录功能,提高稳定性和效率。 加入右侧信息栏,提供更友好的控制台信息查阅...

oO咫尺天涯
2017/09/19
0
0
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可