dw中下拉菜单怎么做？
解决时间 2021-08-12 03:51
- 提问者网友：wodetian
- 2021-08-11 16:47
网站上那种鼠标经过就会出现下拉菜单是怎么作的？请教？急~~~
最佳答案
- 五星知识达人网友：第幾種人
- 2021-08-11 16:52
那是用js作的，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/html; charset=gb2312" />
<title>下拉及多级弹出式菜单</title>
<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
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>
<style>
body { font-size:12px; }
* { margin:0; padding:0; }
ul, li, dl, dd { list-style:none; }
li { float:left; width:100px; height:20px; margin-left:3px; position:relative;}
a { display:block; width:100px; text-indent:3px; border:1px solid #ccc; line-height:20px; text-
decoration:none; color:#666;}
a:hover { background-color:#ddd;}
dl { display:none; top:20px; left:0px; position:absolute; width:100px;}
dl dd { width:100px; height:20px; }
dl a { background:#fcc;}
li:hover dl, li.over dl { display:block;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="">文章</a>
<dl>
<dd><a href="">CSS教程</a></dd>
<dd><a href="">DOM教程</a></dd>
<dd><a href="">XML教程</a></dd>
<dd><a href="">FLASH教程</a></dd>
</dl>
</li>
<li><a href="">参考</a>
<dl>
<dd><a href="">XHTML</a></dd>
<dd><a href="">XML</a></dd>
<dd><a href="">CSS</a></dd>
</dl>
</li>
<li><a href="">BLOG</a>
<dl>
<dd><a href="">全部</a></dd>
<dd><a href="">网页技术</a></dd>
<dd><a href="">UI技术</a></dd>
<dd><a href="">FLASH技术</a></dd>
</dl>
</li>
<li><a href="">link</a>
<dl>
<dd><a href="">1</a></dd>
<dd><a href="">2</a></dd>
<dd><a href="">3</a></dd>
<dd><a href="">4</a></dd>
</dl>
</li>
</ul>
<div ></div>
</body>
</html>
全部回答
- 1楼网友：低音帝王
- 2021-08-11 18:57
去www.kuhappy.com看看
- 2楼网友：旧脸谱
- 2021-08-11 18:16
现在还谁用DW做，多网站找现成的改了。懒人图库等网站上多的是！
- 3楼网友：妄饮晩冬酒
- 2021-08-11 17:16
<!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/html; charset=utf-8" /><title>二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU</title><style type="text/css">.menu {font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left; position:relative;}.menu ul li a, .menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff;border-width:1px 1px 0 0;background:#c9c9a7; line-height:30px; font-size:11px;}.menu ul li ul {display: none;}.menu ul li:hover a {color:#fff; background:#b3ab79;}.menu ul li:hover ul {display:block; position:absolute; top:31px; left:0; width:105px;}.menu ul li:hover ul li a {display:block; background:#faeec7; color:#000;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}</style><!--[if lte IE 6]><style type="text/css">table {border-collapse:collapse;margin:0; padding:0;}.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}.menu ul li a:hover {color:#fff; background:#b3ab79;}.menu ul li a:hover ul {display:block; position:absolute; top:32px; left:0; width:105px;}.menu ul li a:hover ul li a {background:#faeec7; color:#000;}.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}</style><![endif]--></head><body><div class="menu"><ul><li><a class="hide" href="../menu/index.html">DEMOS</a><!--[if lte IE 6]><a href="../menu/index.html">DEMOS<table><tr><td><![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="index.html">MENUS</a><!--[if lte IE 6]><a href="index.html">MENUS<table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../layouts/index.html">LAYOUTS</a><!--[if lte IE 6]><a href="../layouts/index.html">LAYOUTS<table><tr><td><![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../boxes/index.html">BOXES</a><!--[if lte IE 6]><a href="../boxes/index.html">BOXES<table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../mozilla/index.html">MOZILLA</a><!--[if lte IE 6]><a href="../mozilla/index.html">MOZILLA<table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../ie/index.html">EXPLORER</a><!--[if lte IE 6]><a href="../ie/index.html">EXPLORER<table><tr><td><![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="../opacity/index.html">OPACITY</a><!--[if lte IE 6]><a href="../opacity/index.html">OPACITY<table><tr><td><![endif]--> <ul> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><!-- clear the floats if required --><div class="clear"> </div></div></body></html>
我要举报
大家都在看
推荐资讯