文档章节

纵向下拉菜单的疑惑

sunshinewyf
 sunshinewyf
发布于 2015/11/30 10:11
字数 284
阅读 44
收藏 0
点赞 0
评论 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
粉丝 15
博文 97
码字总数 64205
作品 0
武汉
程序员
CSS导航菜单简单示例

1、纵向菜单 纵向菜单代码示例 <!DOCTYPE html><html><head lang="en"> </head><body> </body></html> 2、横向菜单 横向菜单源码示例 <!DOCTYPE html><html><head lang="en"> </head><body> ......

风吹一米阳光 ⋅ 2015/10/30 ⋅ 0

300+Jquery, CSS, MooTools 和 JS的导航菜单资源(总有一个适合你!)

如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手。今天为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Balsamiq Mockups UI控件名中英文对照

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

凯文加内特 ⋅ 2014/04/04 ⋅ 0

70+漂亮且极具亲和力的导航菜单设计推荐

网站可用性是任何网站的基本要素,而可用的导航更是网站所必需的要素之一。导航决定了用户如何与网站进行交互。如果没有了可用的导航,那么网站内容就会变得毫无用处。导航菜单应当足够简单以...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗 ⋅ 2010/12/30 ⋅ 1

Arduino 集成开发环境--Buddy++

Buddy++是梦车间创客文化空间旗下BuddyStudio团队发起的开源软件项目,项目为广大Arduino开发者提供了一个全新的集成开发工具。Buddy++是基于Java FX框架开发的Arduino集成开发环境,相比Ard...

oO咫尺天涯 ⋅ 2017/09/19 ⋅ 0

MyEclipse移动Web模拟器指南(一)

在iOS和Android模拟器中预览应用程序 移动Web模拟器在开发过程中既可用于预览应用程序,也可用于浏览互联网上的应用程序或网站。使用该模拟器,您可以在不同设备上查看应用程序、改变方向、测...

Miss_Hello_World ⋅ 2015/06/15 ⋅ 0

【Android游戏开发十八】解放手指,利用传感器开发游戏!(本文讲解在SurfaceView中用重力传感器控制圆球的各方向移动)

李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/344.html 很多童鞋说我的代码运行后,点击home或者back后会程序异常,...

迷途d书童 ⋅ 2012/03/19 ⋅ 0

UIPickerView 选取器(滚轮)—IOS开发

选取器被用来取代PC上面的下拉菜单,它是一个大大的滚轮,它占用固定的大小 320×216. 一、创建 大小虽然固定,但是位置可以任意(不过横向被充满,咱也只能改变纵向位置)。与UItableView 类似...

晨曦之光 ⋅ 2012/03/12 ⋅ 0

Bootstrap 按钮下拉菜单

本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span...

wybo521 ⋅ 2016/01/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 30分钟前 ⋅ 0

数据仓库技术概述(一看就是架构师写的,对我极其有用)

ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract)、交互转换(transform)、加载(load)至目的端的过程。ETL一词较常用在数据仓库,但其对象并不限于...

gulf ⋅ 32分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 33分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 37分钟前 ⋅ 0

vue获取input输入框的数据

用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过...

王子城 ⋅ 39分钟前 ⋅ 0

竟然这就是面向对象的游戏设计?!

从程序角度考虑,许多 JavaScript 都基于循环和大量的 if/else 语句。在本文中,我们可了解一种更聪明的做法 — 在 JavaScript 游戏中使用面向对象来设计。本文将概述原型继承和使用 JavaSc...

柳猫 ⋅ 44分钟前 ⋅ 2

git cmd git bash

刚用到了Git,看到windows环境下有两个命令输入窗口 第一个是可视化图形界面,第二个是CMD,第三个是Bash。 Git中的Bash是基于CMD的,在CMD的基础上增添一些新的命令与功能。所以建议在使用的...

东东笔记 ⋅ 46分钟前 ⋅ 0

分布式系统CAP和Base

1、分布式系统 1.1 简介 由多台计算机和通信的软件组件通过计算机网络连接(本地网络或广域网)组成。分布式系统是建立在网络之上的软件系统。正是因为软件的特性,所以分布式系统具有高度的...

xixingzhe ⋅ 57分钟前 ⋅ 0

查看磁盘占用情况

记一次jenkins构建失败的问题 Build step 'Send build artifacts over SSH' changed build result to UNSTABLE 网上查资料都没明确表明是什么错,回忆之前处理这样的问题。第一时间想到的是不...

ManderSF ⋅ 59分钟前 ⋅ 0

数据库管理提速:SQL解析的探索与应用

前言: SQL解析是一项复杂的技术,一般都是由数据库厂商来掌握,当然也有公司专门提供SQL解析的API。SQL解析与优化是属于编译器范畴,和C语言等其他语言的解析没有本质的区别。其中分为词法分...

java高级架构牛人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部