如何用css做下拉菜单

html-css015

如何用css做下拉菜单,第1张

纯CSS的下拉菜单,此处理解的意思就是

标签套

标签,然后再给

标签设置样式。在被套的

标签设置平时状态为隐藏,再等鼠标移动到上一个

标签时,将被套的

标签显示(样式: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}最后我们就可以运行整个文件实现效果了,建站教程网建议大家一起跟着步骤一步一步的做哦。