标签套
标签,然后再给
标签设置样式。在被套的
标签设置平时状态为隐藏,再等鼠标移动到上一个
标签时,将被套的
标签显示(样式:overflow:hidden
)。
贴一段网上摘的纯CSS下拉菜单(二级)
利用float制作兼容ie6纯css下来菜单
*
{
margin:0
padding:0
}
ul
{
list-style:none
}
a:hover
{color:#555
}
.nav
{
float:left
overflow:hidden
text-align:center
font-size:14px
}
.nav
dd
{
float:left
width:300px
margin:-888px
-150px
0
0
}
.nav
dd
a
{
float:left
margin-top:888px
display:block
position:relative
background:#eee
width:150px
height:30px
line-height:30px
border-bottom:1px
solid
#fff
}
.nav
a:hover
{
margin-right:1px
background:#3cf
}
.nav
dd
ul
{
float:left
font-size:0
z-index:888
}
.nav
dd
li
a
{
clear:left
width:150px
margin-top:0
font-size:14px
}
.nav
dd
li
a:hover
{
margin-right:1px
}
首页
关于我们
公司简介
公司文化
企业荣誉
联系我们
新闻动态
国内新闻
国外新闻
产品展示
111
222
设置子菜单项的样式分为3步 1、首先对每个子菜单项,也就是dd元素进行常规设置,包括内外边距清零,设置文字颜色等。/* 设置菜单项的dd */
#menu li dd {margin:0padding:0color: #fff
} 2、为了使最后一个dd的下端有一条分割线,我们设置它为1px的红色下边框,这就使之与上边框的红色分割线想对应了,也告诉浏览者这是一块可以点击的区域。
#menu li dd.last {
border-bottom:1px solid #b00
} 上面的代码也新增了一个last的类,因此我们必须在对应的HTML代码中最后一个dd指定class="last"。
CSS高级教程 3、设置子菜单的链接的样式
#menu li dd a, #menu li dd a:visited {
display:block
color:#FFF
text-decoration:none
padding:5px 20px
background: #0000FF}此时,我们在浏览器就可以看到下拉菜单的样式已经可以显示了。 二、设置鼠标经过时的响应
最后一条规则,让鼠标滑过有下拉项的时候,显示下拉菜单。当然我们实际设置的是:如果某一个下拉菜单的父级元素(一级菜单项)被鼠标滑过,那么就让该下拉菜单可以被看见:
#menu li dd { visibility: visible}
background: #0000FF}最后我们就可以运行整个文件实现效果了,建站教程网建议大家一起跟着步骤一步一步的做哦。