html怎么写上拉菜单，我查了几个都是下拉菜单_随笔

是这样的效果吧？！

这是具体的代码，用纯CSS写的，希望能帮助到你！

<!doctype html>

<html>

<head>

<title>底部菜单上d且固定</title>

<style>

*{ margin:0padding:0}

body{ margin:0padding:0background:#f3f3f3}

#slcd{ width:100%height:60pxbackground:#09Cposition:fixedbottom:0px}

#slcd ul,#slcd ul li{ height:60px}

#slcd ul li{ width:24.9%float:leftlist-style-type:noneline-height:60pxtext-align:centeroverflow:hidden}

#slcd ul li:hover{ background:#09Foverflow:visible}

#zcd ul,#zcd ul li{ width:100%height:60pxbackground:#09C}

.zcd1{ margin-top:-240pxwidth:100%}/*每个子菜单的上边距需要手动调整*/

.zcd2{ margin-top:-300pxwidth:100%}

.zcd3{ margin-top:-300pxwidth:100%}

.zcd4{ margin-top:-120pxwidth:100%}

</style>

</head>

<body>

<ul>

<li>菜单1

<ul>

</ul>

</div>

</li>

<li style="border-left:2px solid #CCCborder-right:2px solid #CCC">菜单2

<ul>

</ul>

</div>

</li>

<li style="border-right:2px solid #CCC">菜单3

<ul>

</ul>

</div>

</li>

<li>菜单4

<ul>

</ul>

</div>

</li>

</ul>

</div>

<div style="width:1080pxheight:2000pxbackground:#c1c1c1margin:0 autofont-size:200px"><p>希望能帮助到你</p></div>

</body>

</html>

这个用jQuery就的toggle函数可以实现。

<!DOCTYPE html>

<head>

<title>Title</title>

<script src="

<style>

.main

{

list-style: none

float: left

margin-left: 20px

}

.main li

{

list-style: none

text-align: left

margin-left: -40px

}

.main ul

{

display: none

}

.main a

{

text-decoration: none

}

.main li a

{

text-decoration: none

}

</style>

</head>

<body>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</body>

$(document).ready(

function () {

$(".main").hover(function () {

$(this).children("ul").toggle()

})

}

)

</script>

</html>

你是要改右键菜单，还是做个左键菜单。

如果时左键菜单的话，到微软站点看看他是怎么做得就行了，

他那套东西功能比较强，但得自己修改。如果是右键菜单，我倒可以帮帮忙。

如果是右键菜单，在DREAMWEAVER中有自带的插件。“Command"/..自己找吧！

如果我的回答没能帮助您，请继续追问。

您也可以向我们团队发出请求，会有更专业的人来为您解答。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7017892.html

html怎么写上拉菜单，我查了几个都是下拉菜单

发表评论

评论列表（0条）