下拉式菜单中的内容堆叠（ul型）
今天使用ul创建下拉式菜单，菜单中的内容堆在了一起。
这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyBlog</title>
<link href="loginMain.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 顶部导航 -->
<div id="top-div">
<ul class="top-title-ul">
<li id="top-title-li-1"><a href="">博客</a>
<ul class="top-title-ul">
<li><a href="">java</a></li>
<li><a href="">html</a></li>
<li><a href="">css</a></li>
<li><a href="">js</a></li>
</ul>
</li>
<li id="top-title-li-2"><a href="">项目</a>
<ul class="top-title-ul">
<li><a href="">java</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
这是我的css代码
.top-title-ul{
list-style-type:none;
margin: 0;
padding: 0;
}
#top-title-li-1{
display: inline-block;
position: relative;
}
#top-title-li-1 li{
display: none;
position: absolute;
}
#top-title-li-1:hover li{
display: block;
}
#top-title-li-2{
display: inline-block;
position: relative;
}
#top-title-li-2 li{
display: none;
position: absolute;
}
#top-title-li-2:hover li{
display: block;
}
根据堆叠情况可以判断出是position的问题，absolute表示元素使用绝对位置，元素之间可以重叠，正好是上边的情况，果断改用relative，但是第一个下拉菜单又会影响之后下拉菜单的位置，这说明思路不对，之后继续分析，通过查找堆叠元素的共同点，发现都是li标签内容。这才明白css中应该指定ul的位置是absolute。
通过修改css文件，问题解决。
.top-title-ul{
list-style-type:none;
margin: 0;
padding: 0;
}
#top-title-li-1{
display: inline-block;
position: relative;
}
#top-title-li-1 ul{
display: none;
position: absolute;
}
#top-title-li-1:hover ul{
display: block;
}
#top-title-li-2{
display: inline-block;
position: relative;
}
#top-title-li-2 ul{
display: none;
position: absolute;
}
#top-title-li-2:hover ul{
display: block;
}
下拉式菜单中的内容堆叠（ul型）的更多相关文章
- Web前端开发实战1：二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- Web前端开发实战2：二级下拉式菜单之JS实现
上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...
- 为下拉式菜单(DropDownList)添加第一个选项
很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html code: <body> <form id= ...
- 用JavaScript+css制作下拉式菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Android入门（七）：Spinner下拉式菜单组件
对于手机和平板电脑的应用程序来说,打字是非常不方便的操作方式,比较好的方式就是列出一组选项让用户挑选,这样就可以避免打字的麻烦.使用Spinner下拉菜单组件需要完成以下几个步骤: 1.建立选项列表, ...
- html基础——下拉式菜单
一个网站能否让用户容易使用该网站往往是由菜单栏体现出来,因为它为网页的大多数页面提供功能入口.一个轻轻的点击以后,即可显示出菜单项,将网站的大部分页面和功能显示出来让用户清楚了解从而用户节约一定的时间 ...
- iOS开发笔记13:顶部标签式导航栏及下拉分类菜单
当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
随机推荐
- 深入理解JS中的对象（三）：class 的工作原理
目录 序言 class 是一个特殊的函数 class 的工作原理 class 继承的原型链关系 参考 1.序言 ECMAScript 2015(ES6) 中引入的 JavaScript 类实质上是 J ...
- docker 容器核心技术
容器的数据卷(volume)也是占用磁盘空间,可以通过以下命令删除失效的volume: [root@localhost]# sudo docker volume rm $(docker volume ...
- 微信小程序入门知识点总结
微信小程序入门知识点总结 前情介绍 微信小程序就不多介绍了,我们想要开发微信小程序首先得到微信公众平台 下方的小程序处注册相关账号并登录,接着填写小程序相关资料.在设置处可找到AppID用以开发微 ...
- linux常用命令---文件软硬链接
文件链接
- oracle [精华] 你是否仍迷信rowid分页？
http://www.itpub.net/thread-1603830-1-1.html
- select 下拉模糊查询
http://ivaynberg.github.io/select2/ https://github.com/ https://github.com/ivaynberg.github.io/selec ...
- PAT-1056 Mice and Rice （分组决胜问题）
1056. Mice and Rice Mice and Rice is the name of a programming contest in which each programmer must ...
- 手机短号（hdu2081）
这里字符串的输入用gets_s()函数. #include<stdio.h> using namespace std; int main() { int N; scanf_s(" ...
- 【解决办法】IIS环境中，打开网站后就直接列出了所有文件
有时候访问一个不应当被访问的网站目录时网站会列出该目录下的所有文件,这很不安全,尤其是我们希望我们自己的网站不出现这种情况,如下图所示. 解决办法,在网站根目录新建web.config文件,内容如下: ...
- Python的大小整数池跟深浅copy
一.小整数池 可变的数据类型:list dict set 可变: 就是里面的数据类型变了,但是指向的内存地址没变. 不可变的数据类型:str 数值类型 tuple 不可变:如果改变了里面的值,相应的只 ...