网页设计中如何使用DIV+CSS实现下拉展示内容?

html-css010

网页设计中如何使用DIV+CSS实现下拉展示内容?,第1张

<div id=“#mainbox”>

<ul>

<li><a hre="#">添加数据</a></li>

<div class="innerbox"><a href="#">图片</a><a href="#">新闻</a><a href="#">产品</a></di>

</ul>

</div>

css设置:

#mainbox{ width:400pxheight:qutomargin:0px auto}

ul{ list-style:none}

li{list-style:nonewidth:100px}

.innerbox{display:none}

#mainbox ul li a:hover div{display:block}[_______只有css3支持.]

下面的方法用到jquery

<script>jquery1.7min.js</script>

<script>

$(function(){

$("#mainbox li").toggle({function(){

$(".innerbox").show()

},function(){

$(".innerbox").hide()

})

})

不懂得话可以问我

</script>

用div+css的ul、li结合script脚本实现下拉列表菜单,全部代码如下,复制在DW中预览即可看到效果,细节样式可以自行修改:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>DIV+CSS实现下拉列表菜单</title>

<style type="text/css">

<!--

ul {

margin: 0px

padding: 0px

list-style-type: none

}

li{

float:left

width:160px

margin-left:1px

}

ul li a{

display:block

font-size:12px

border:#CCCCCC 1px solid

padding:3px

text-decoration:none

color:#777777

margin-top:1px

text-align:center

}

ul li a:hover{

background-color:#0099CC

color:#FFFFFF

}

li ul{

display:none

top:20px

margin-top:1px

}

li:hover ul,li.over ul{

display:block

}

-->

</style>

</head>

<script type="text/javascript"><!--//--><![cdata]//><!--

startlist = function() {

if (document.all&&document.getElementByIdx) {

navRoot = document.getElementByIdx("nav")

for (i=0i<navRoot.childNodes.lengthi++) {

node = navRoot.childNodes[i]

if (node.nodeName=="li") {

node.onmouseover=function() {

this.className+=" over"

}

node.onmouseout=function() {

this.className=this.className.replace(" over","")

}

}

}

}

}

window.onload=startlist

//--><!]]></script>

</script>

<body>

<ul >

<li><a href="">文章</a>

<ul>

<li><a href="">CSS 教程</a></li>

<li><a href="">DOM 教程</a></li>

<li><a href="">XML 教程</a></li>

<li><a href="">Flash 教程</a></li>

</ul>

</li>

<li><a href="">参考</a>

<ul>

<li><a href="">XHTML</a></li>

<li><a href="">XML</a></li>

<li><a href="">CSS</a></li>

</ul>

</li>

<li><a href="">Blog</a>

<ul>

<li><a href="">全部</a></li>

<li><a href="">网页技术</a></li>

<li><a href="">UI 技术</a></li>

<li><a href="">Flash 技术</a></li>

</ul>

</li>

<li><a href="">摇滚</a>

<ul>

<li><a href="">纯音乐</a></li>

<li><a href="">古典金曲</a></li>

<li><a href="">UI 技术</a></li>

<li><a href="">Flash 技术</a></li>

</ul>

</li>

</ul>

</body>

</html>

直接是用CSS控制的下拉菜单,在各个浏览器中表现的不够完美

最佳的方法是使用jQuery来制作,代码如下:

[HTML部分]

<div id="nav">

<ul>

<li><a href="#">菜单零</a></li>

<li><a href="#">菜单一</a></li>

<ul class="childnav">

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

</ul>

<li><a href="#">菜单二</a>

<ul class="childnav">

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a></li>

</ul>

</li>

<li><a href="#">菜单四</a></li>

<!-- /nav -->

</ul>

</div>

[JS部分]

<script type="text/javascript">

$(document).ready(function(){

$("#nav ul li a").hover(function() {

$(this).parent().find("ul.childnav").slideDown('fast').show()

$(this).parent().hover(function() {

}, function(){

$(this).parent().find("ul.childnav").slideUp('slow')

})

})

})

</script>

[CSS部分]

<style type="text/css">

* { padding:0margin:0list-style:none}

#nav {

margin:200px

}

#nav ul { background:#333padding:5pxfloat:leftwidth:100%}

#nav li {

float:left

padding:0 5px

position:relative

}

#nav li a {

float:left

padding:0 5px

display:block

text-align:center

color:#fff

text-decoration:none

font-size:12px

height:18px

line-height:18px

}

#nav li a:hover, #nav li a.on {

background:#444

text-decoration:none

}

#nav li ul {

display: none

position: absolute

left: -2px

top: 18px

background: #999

border-bottom:3px solid #333

z-index:1000

}

#nav li ul li {

background:none

float:none

padding:0

}

#nav li ul a {

float:none

}

#nav li ul a:hover {

background:#888

}

#nav li:hover ul, #nav li.over ul {

display: block

z-index:999

}

</style>