如何使用HTML和CSS制作下拉菜单

2023-03-04 23:46:01html-css018

如何使用HTML和CSS制作下拉菜单,第1张

纯CSS的下拉菜单，我理解的意思就是<li>标签套<li>标签，然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏，再等鼠标移动到上一个<li>标签时，将被套的<li>标签显示（样式：overflow:hidden）。大致意思就是如此。对这些也不能说特别精通。网上倒是有很多倒子的。

贴一段网上摘的纯CSS下拉菜单（二级）

<!DOCTYPE HTML>

<html>

<head>

<title>利用float制作兼容ie6纯css下来菜单</title>

* { margin:0padding:0}

ul { list-style:none}

a:hover {color:#555}

.nav { float:leftoverflow:hiddentext-align:centerfont-size:14px}

.nav dd { float:leftwidth:300pxmargin:-888px -150px 0 0}

.nav dd a { float:leftmargin-top:888pxdisplay:blockposition:relativebackground:#eeewidth:150pxheight:30pxline-height:30pxborder-bottom:1px solid #fff}

.nav a:hover { margin-right:1pxbackground:#3cf}

.nav dd ul { float:leftfont-size:0z-index:888}

.nav dd li a { clear:leftwidth:150pxmargin-top:0font-size:14px}

.nav dd li a:hover { margin-right:1px}

</style>

</head>

<body>

<dd>

<ul>

</ul>

</dd>

<dd>

<ul>

</ul>

</dd>

<dd>

<ul>

</ul>

</dd>

</dl>

</body>

</html>

要用到数据库和js。

<html>

<head>

<title>通用二级下拉菜单(改进版) - 51windows.Net</title>

</head>

<body>

<!--

function TwoSelectInit(so,dv1,dv2){

var o1=so.o1var o2=so.o2var allstr=so.strvar dt1=so.dt1var dt2=so.dt2var selectonce=so.selectonce

var _s = "*|^@"

var s1=new Array(),v1=new Array(),s2=new Array(),v2=new Array()

var s1i = 0,s2i = 0

if(dt1!=""){

if(!selectonce){allstr=dt1+_s.charAt(1)+_s.charAt(0)+allstr}

else{allstr=dt1+_s.charAt(1)+dt2+_s.charAt(0)+allstr}

}

aa=allstr.split(_s.charAt(0))

for(aai=0aai<aa.lengthaai++){

aaa=aa[aai].split(_s.charAt(1))

tmps1 = aaa[0].split(_s.charAt(3))

s1[aai] = tmps1[0]v1[aai] = (tmps1.length==2)?tmps1[1]:tmps1[0]

s2[aai] = new Array()v2[aai] = new Array()

if(v1[aai]==dv1){s1i = aai}

bbbb=aaa[1]

if(dt2!=""&&!selectonce){if(bbbb==""){bbbb=dt2}else{bbbb=dt2+_s.charAt(2)+bbbb}}

bb=bbbb.split(_s.charAt(2))

for(bbi=0bbi< bb.lengthbbi++){

tmps2 = bb[bbi].split(_s.charAt(3))

s2[aai][bbi] = tmps2[0]v2[aai][bbi] = (tmps2.length==2)?tmps2[1]:tmps2[0]

if(v2[aai][bbi]==dv2){s2i = bbi}

}

for(var i=0i<o1.options.lengthi++){o1.remove(i)i--}

for(k=0k<s1.lengthk++){o1.options.add(new Option(s1[k],v1[k]))}

o1.selectedIndex=s1i

for(var i=0i<o2.options.lengthi++){o2.remove(i)i--}

for(k=0k<s2[s1i].lengthk++){o2.options.add(new Option(s2[s1i][k],v2[s1i][k]))}

o2.selectedIndex=s2i

}

function HwTwoSelect(o1,o2,liststr,dt1,dt2,t){this.o1=o1this.o2=o2this.str=liststrthis.dt1=dt1this.dt2=dt2this.selectonce=t}

//-->

</SCRIPT>

选择一次：<select name="a" onchange="TwoSelectInit(test1,this.value)"></select>　<select name="b"></select><hr>

选择两次：<select name="aa" onchange="TwoSelectInit(test2,this.value)"></select>　<select name="bb"></select><hr>

有初始值：<select name="aaa" onchange="TwoSelectInit(test3,this.value)"></select>　<select name="bbb"></select>

</form>

<!--

var selecttext=""

+"搜索@search|Google@http://www.google.com/^Yahoo@http://www.yahoo.com/"

+"*收藏@fav|无忧视窗@http://www.51windows.Net/^蓝色理想@http://www.blueidea.com/^POPO@http://plod.popoever.net/"

+""

var test1 = new HwTwoSelect(document.myform.a,document.myform.b,selecttext,"－

分类－@","－网址－@",1)//最后的参数表示，选了一级菜单后，二级菜单是否还要显示“请选择”，1或true代码，不显示，0或false代

表显示

TwoSelectInit(test1)

var test2 = new HwTwoSelect(document.myform.aa,document.myform.bb,selecttext,"－分类－@","－网址－@",0)

TwoSelectInit(test2)

var test3 = new HwTwoSelect(document.myform.aaa,document.myform.bbb,selecttext,"－分类－@","－网址－@",0)

TwoSelectInit(test3,"fav","http://www.51windows.Net/")

//-->

</SCRIPT>

<p>以下是示例代码，详细请查看源文件：<hr>

<p>&ltform method="post" name=<font color="#FF00FF">myform</font>&gt<br>

&ltselect name=&quot<font color="#FF0000">select1</font>&quot onchange=&quotTwoSelectInit(<font color="#0000FF">ttt</font>,this.value)&quot&gt&lt/select>　&ltselect

name=&quot<font color="#FF0000">select2</font>&quot&gt&lt/select>&lthr><br>

&lt/form></p>

<p>&ltSCRIPT LANGUAGE="JavaScript"><br>

&lt!--<br>

var <font color="#008000">selecttext</font>=&quot&quot<br>

+"搜索@search|Google@http://www.google.com/^Yahoo@http://www.yahoo.com/"<br>

+"*收藏@fav|无忧视窗@http://www.51windows.Net/^蓝色理想@http://www.blueidea.com/^POPO@http://plod.popoever.net/"<br>

+""<br>

<br>

var <font color="#0000FF">ttt</font> = new HwTwoSelect(document.<font color="#FF00FF">myform</font>.<font color="#FF0000">select1</font>,document.<font color="#FF00FF">myform</font>.<font color="#FF0000">select2</font>,<font color="#008000">selecttext</font>,&quot－分类－@","－网址－@",1)<br>

TwoSelectInit(<font color="#0000FF">ttt</font> ,&quotfav&quot,&quothttp://www.51windows.Net/&quot)<br>

<br>

//--><br>

&lt/SCRIPT></p>

<p><font color="#FF0000">bug:在二级菜单有初始值时，如果表单重置，二级菜单的值会变为空</font></p>

</body>

</html>

一种超级简单的二级下拉菜单制作方法，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>简单的二级下拉菜单</title>

#FM >li >ul.fm{ display:none}