11.css定义下拉菜单
注意点：
1.设置a标签的width 和 height 的时候，直接设置是没用的，可以以这样两种方式设置
(1). display：block;
(2). float:left;
2.设置下拉菜单，最重要的是
(1).用定位 position: absolute; 定义 li 标签下面的ul 标签,隐藏2级栏目,display:none;
(2).将li列表的浮动效果取消,float:none;
(3).然后定义鼠标滑过 li标签定义的效果， li : hover ul {display:block};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
body ul{
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
margin: 40px 0 0 450px;
border: 1px solid #ccc;
float: left;
}
.nav ul li {
float: left;
}
.nav ul li a {
width: 100px;
height: 30px;
border: 1px solid black;
background-color: #49D82D;
color: #ffffff;
display: block;
text-align: center;
line-height: 30px;
}
.nav ul li a:hover {
background: #45B0D1;
}
.nav ul li ul {
position: absolute;
display: none;
}
.nav ul li ul li {
float: none;
}
.nav ul li ul li a {
border-right: none;
border-top: 1px dotted #ccc;
}
.nav ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">栏目1</a>
<ul>
<li><a href="">二级栏目1</a></li>
<li><a href="">二级栏目2</a></li>
<li><a href="">二级栏目3</a></li>
<li><a href="">二级栏目4</a></li>
</ul>
</li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
<li><a href="">栏目4</a></li>
</ul>
</div>
</body>
</html>
11.css定义下拉菜单的更多相关文章
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- HTML+CSS写下拉菜单
今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...
- CSS的下拉菜单被挡住，修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- html/css 实现下拉菜单效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- 纯css实现下拉菜单
今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...
- 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
- html5 css练习 下拉菜单制作
*{ margin: 0; padding: 0;}li{ list-style-type: none;}a{ text-decoration: none;}.ul1{marg ...
- CSS实现下拉菜单的几种方法
PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...
随机推荐
- VS2015 经常不出现智能提示，代码颜色也没有了
重置下.开始菜单 -->所有程序-->Visual Studio 文件夹 --> Visual Studio Tools --> Developer Command Promp ...
- php的instanceof和判断闭包Closure
类型运算符 instanceof 用于确定一个 PHP 变量是否属于某一类 class 的实例,在此之前用 is_a(),但是后来 is_a() 被废弃 <?php class MyClass ...
- 0xffff0000颜色表示
0xffff0000表红色,意思是: A:ff=255 R:ff=255 G:00=0 B:00=0 可如下将(255,0,0,255)转成0xffff0000并输出: inline DWORD RG ...
- 更新Bash路径的缓存
---恢复内容开始--- 1.登陆一个新的vps时候,发现git的版本是1.8的,太久了,于是就源码安装了新的版本2.4. 2.老版本在/usr/bin/git,新版本安装的/usr/local/bi ...
- jQuery - 获得内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...
- haproxy配置tcp负载均衡
#---------------------------------------------------------------------# 监控页面 #---------------------- ...
- iOS 小数点精度问题处理
实际开发中有时候经常会需要去处理小数点精度问题,如果是整数保留整数,如果有小数则保留不为0的的小数,最大2位小数 eg: 2.013 ---> 2.01 2.0 ---> 2 2.10 - ...
- HTML5 的位置
HTML5 的位置 在HTML5COL学院的前面几个章节中我们已经对HTML5 Geolocation API有了一定认识,接下来我们要对位置做些更有意思的处理:看看你与我们HTML5COL学院的办公 ...
- Easyui data方法扩展finder
finder: function(jq, conditions){ if(!$(jq).data("OriginalData")){ $(jq).data("Origin ...
- EasyUI获取DataGrid中某一列的所有值
function count() { var rows = $('#dg'').datagrid('getRows')//获取当前页的数据行 var total = 0; for (var i = 0 ...