如何用css做下拉菜单

html-css038

如何用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

使用HTML和CSS制作下拉菜单的方法如下:

1、编写带有div导航的html代码:

2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中,在图示的HTML代码中,一个简单的无序列表(ul)来表示主菜单项。

3、在主菜单区域中添加链接。在本步骤中,在无序列表(ul)每一项上添加链接。

4、在“关于我们(About Us)”下方LI标签内添加一个无序列表,它代表其子菜单的链接。

5、制作导航css:

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:select { width: 210px}。

3、浏览器运行index.html页面,此时网页下拉列表的大小被调整为了210px。