div+css下拉列表怎么写

如题所述

第1个回答推荐于2016-02-21

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

<head>

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

<!--

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>

startlist = function() {

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

navRoot = document.getElementByIdx("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>

</script>

<body>

<ul >

<ul>

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

</ul>

</li>

<ul>

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

</ul>

</li>

<ul>

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

</ul>

</li>

<ul>

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

</ul>

</li>

</ul>

</body>

</html>

你自己在dreamwaver里面看看，可以显示的。

这个是我用txt弄好之后修改成html文件打开后的截图

本回答被提问者和网友采纳

第2个回答推荐于2017-09-19

<!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">&
lt;head><meta http-equiv="Content-
Type" content="text/html; charset=utf-8" /><title>下拉列表<
/title><style type="text/css">
body,div,a{ margin:0; padding:0;}#demo{ margin:0 auto; width:500px;}#demo a{color:#000; text-
decoration:none; display:block; width:200px; height:20px; line-
height:18px; border:1px solid #009; text-
indent:1em;}#demo a:hover{ color:#F30; text-
decoration:underline; background:#CCC;}#demo1 a{ width:200px; height:auto; border:1px solid #009; border-
top:none; text-
indent:1em; background:#CCC; width:200px; display:block;}#demo1 a:hover{ color:#F30; background:#FFF;}#demo1{ margin:0 auto; width:500px; height:auto; display:none;}</style><script type="text
/javascript">window.onload=function()
{ var oA1=document.getElementById("demo1"); var oA=document.getElementById("demo"); oA.onclick=function() { var style=oA1.style; if(style.display==""||style.display=="none") { style.display="block"; } else { style.display="none"; } }}&
lt;/script></head><body> <div id="demo"&
gt; <a href="javascript:;" title="中国">中国</a> <
/div> <div id="demo1"> <
a href="javascript:;" title="广东">广东</a> <
a href="javascript:;" title="广东">广东</a> <
a href="javascript:;" title="广东">广东</a> <
a href="javascript:;" title="广东">广东</a> <
a href="javascript:;" title="广东">广东</a> </div><
/body></html>

相似回答

一个CSS+DIV做得三级下拉菜单的代码,我看不是很懂,请高手请教,只需要在...答：.menu ul li a:hover ul li a ul {visibility:hidden;}设置ul元素隐藏、并且保留其物理空间 .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}鼠标悬停时显示ul元素、并设置绝对定位；字体颜色 .menu ul li a:hover ul li...

div+css制作横向下拉式菜单方面的问题答：<body> <div id="menu"> <ul id="nav"> <li><a href="#">标题</a></li> <li><a href="#">标题</a></li> <li><a href="#">标题</a> <ul> <li><a href="#">下拉</a></li> <li><a href="#">下拉</a></li> <li><a href="#">下拉</a></li> </ul...

大家正在搜

css列表横向排列 divcss竖向排列 html怎么让两个div在一行怎样使div横着排列 css让图片4列排列如何让两个div上下排列 css两个div如何并排 html怎么将图片纵向排列 html多div排列