下拉式菜单中的内容堆叠（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 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
随机推荐
- 记一条sql语句优化
傻瓜级的.此sql语句存在于分销王系统中. 查阅slow log ,时间设置1s 发现很多 SELECT r.*, goods_id, bn, name FROM sdb_goods_rate r, ...
- Node.js中间件的使用
1.中间件 为主要的业务逻辑服务:接收到请求,以及做出响应 应用级中间件.路由级中间件.内置中间件.第三方中间件.错误处理中间件 (1)路由级中间件 路由器的使用 (2)应用级中间件 也称为自定义中间 ...
- MySQL表的CRUD及多表查询
数据库表的增删改查操作: 增.删.改 查: 单表查询 简单查询.where约束.group by分组.聚合查询.having过滤.order by排序.limit限制.正则匹配 多表查询 连表查询:交 ...
- Django路由配置之正则表达式详解
正则表达式详解 urls.py from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles ...
- 洛谷P2765 魔术球问题
题目链接:https://www.luogu.org/problemnew/show/P2765 知识点: 最大流 解题思路: 本题所有边的容量均为 \(1\). 从 \(1\) 开始加入数字,将这个 ...
- [UWP]使用离散式关键帧播放动画
这篇文章介绍离散式关键帧,并使用它做些有趣的动画. 1. 什么是离散式关键帧 以DoubleAnimationUsingKeyFrames为例,它支持四种Double的关键帧,其中EasingDoub ...
- vue-cli3的eslint配置问题
vue-cli3按照官网教程配置搭建后,发现每次编译,eslint都抛出错误 error: Expected indentation of 4 spaces but found 0 (indent) ...
- Python——关于定义过程
def sum(a,b): a = a + b return a print(sum(1,2)) s = 3 t = 5 print(sum(s,t)) 题目:你觉得前三行代码会输出什么? 1.输入两 ...
- 没找到工作的Java软件工程师是屌丝中的屌丝啊
Java软件开发的工作咋就那么难找呢?
- android小Demo--圆球跟随手指轨迹移动
eatwhatApp的客户端基本实现,会再后续进行整改,今天做一个在网上找到的小Demo,让屏幕中出现一个圆球,并跟随手指移动. 写个java类DrawView继承于View: public clas ...