<style type="text/css">
<!--
body{
font-size:12px;
color:#999999;
}
.menu{
list-style:none;
}
.menu li{
position:relative;
float:left;
}
.menu li{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;text-decoration:none;}
.menu ul{
display:none;
position:absolute;
top:30px;
left:-30px;
}
.menu ul li {clear:both;text-align:left;font-size:12px;background:#cccccc;}
.menu a:hover {background:#fafafa;color:#000;border:1px solid #000;}
-->
</style>
<body>
<ul class="menu">
<li> <a href="#">人族 </a></li>
<li> <a href="#">大法师 </a> </li>
<li>山丘之王 </li>
<li> <a href="#">兽族</a></li>
<li>贱圣 </li>
<li>牛头人 </li>
</ul>
</body>
解决方案 »
- jquery 怎么获取所有< a href="">点击</a>这样的标签
- 怎样做才能给每行都赋值
- CKEditor在使用的时候,编辑框中总是默认带有P元素,应该如何去掉呢
- 用什么语句可以获得“单击浏览器自带的刷新”
- innerHTML中包含\,",不能解析问题
- option简单问题
- 有关javascript中checkbox的相关问题。麻烦了。(所有分了)
- 用 javacscript和html中<select>标签实现可编辑的 下拉列表
- 为什么我的图片变换不了————紧急求助!!
- json 跨域获取
- 关于删除数组Array元素的问题,splice()在IE下的使用方法~~~~~~~~~~~~~~~~
- js实现决策树
你都把li里面的ul去掉了
如何能做到显示,隐藏。
再加这一句
.menu li ul li a {clear:both;text-align:left;font-size:12px;background:#cccccc;}
<!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>
</head><style type="text/css">
<!--
body{
font-size:12px;
color:#999999;
} ul#menu{
list-style:none;
margin:0;
clear:both;
width:100%;
padding:0;
font-size:12px;
text-align:left;
line-height:28px;
position:relative;
}
ul#menu ul{
list-style:none;
margin:0;
clear:both;
border:1px solid #ccc;
padding:0;
font-size:12px;
text-align:left;
line-height:28px;
float:left;}
ul#menu li{
position:relative;
padding-left:10px;
padding-right:10px;
height:28px;
background:#f5f5f5;
float:left;
margin:0 10px;}
ul#menu li ul li{ white-space:nowrap;}
ul#menu li ul{
position:absolute;
left:0px;
_left:0px;
top:28px;
display:none;
background:#f5f5f5;}
ul#menu li.over{
background:#fff;}
ul#menu li.out{
background:#f5f5f5;
}
ul#menu a{
text-decoration:none;
color:#000;
_height:0;
}
ul#menu a:link { color: #000; text-decoration: none;}
ul#menu a:hover { color: #f00; text-decoration: underline; }
-->
</style>
<body>
<ul id="menu">
<li> <a href="#">人族
<ul>
<li><a href="#">大法师</a> </li>
<li>山丘之王</li>
</ul> </a>
</li>
<li> <a href="#">兽族
<ul>
<li>贱圣 </li>
<li>牛头人</li>
</ul> </a>
</li>
</ul>
<script type="text/javascript">
function initMenu(event,ul){
if(!ul) ul = document.getElementById("menu");
li = ul.getElementsByTagName("li");
for(i=0;i<li.length;i++)
{
li[i].onmouseover = function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";
}catch(e){};
}
li[i].onmouseout = function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";
}catch(e){};
}
}
}
window.onload = initMenu;
</script>
</body> </html>[/code]
<!--
body{
font-size:12px;
color:#999999;
} ul#menu{
list-style:none;
margin:0;
clear:both;
width:100%;
padding:0;
font-size:12px;
text-align:left;
line-height:28px;
position:relative;
}
ul#menu ul{
list-style:none;
margin:0;
clear:both;
border:1px solid #ccc;
padding:0;
font-size:12px;
text-align:left;
line-height:28px;
float:left;}
ul#menu li{
position:relative;
padding-left:10px;
padding-right:10px;
height:28px;
background:#f5f5f5;
float:left;
margin:0 10px;}
ul#menu li ul li{ white-space:nowrap;}
ul#menu li ul{
position:absolute;
left:0px;
_left:0px;
top:28px;
display:none;
background:#f5f5f5;}
ul#menu li.over{
background:#fff;}
ul#menu li.out{
background:#f5f5f5;
}
ul#menu a{
text-decoration:none;
color:#000;
_height:0;
}
ul#menu a:link { color: #000; text-decoration: none;}
ul#menu a:hover { color: #f00; text-decoration: underline; }
-->
</style>
<body>
<ul id="menu">
<li> <a href="#">人族
<ul>
<li><a href="#">大法师</a> </li>
<li>山丘之王</li>
</ul> </a>
</li>
<li> <a href="#">兽族
<ul>
<li>贱圣 </li>
<li>牛头人</li>
</ul> </a>
</li>
</ul>
<script type="text/javascript">
function initMenu(event,ul){
if(!ul) ul = document.getElementById("menu");
li = ul.getElementsByTagName("li");
for(i=0;i<li.length;i++)
{
li[i].onmouseover = function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";
}catch(e){};
}
li[i].onmouseout = function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";
}catch(e){};
}
}
}
window.onload = initMenu;
</script>
</body>