CSS菜单换行问题
发布网友
发布时间：2022-04-21 19:31
共2个回答
热心网友
时间：2023-07-16 12:51
单独实现个分级菜单实例给你看看吧！不过太多代码了分批发了<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单演示</title>
<style type="text/css">
<!--
body,ul,ol,li,dl,dt,dd,h1{
list-style:none;
padding:0px;
margin:0px;
}
body{
font-family:"华文宋体";
font-size:12px;
color:#333333;
background-color:#FFFFFF;
}
a{
border:none;
text-decoration:none;
}
#menu{
width:980px;
margin:30px;
}
#menu dl{
padding-left:10px;
height:30px;
overflow:hidden;}
#menu dl dd{
padding-right:5px;
float:left;
}
#menu dl dd a{
background:url(./images/menu1.gif) no-repeat 0px -60px;
padding-left:10px;
display:block;
}
#menu dl dd a span{
display:block;
color:#663300;
text-align:center;
line-height:34px;
font-size:14px;
padding-right:10px;
background:url(images/menu1.gif) no-repeat right -60px;
overflow:hidden;
}
#menu dl dd a:hover ,#menu dl dd.ok a {
cursor:pointer;
font-weight:bold;
background-position:0 -90px;
}
#menu dl dd a:hover span,#menu dl dd.ok a span{
cursor:pointer;
font-weight:bold;
background-position:right -90px;
}
#menu ol{
clear:both;
height:30px;
background:url(images/menu1.gif) repeat-x 0px 0px;
}
#menu ol li{
float:left;
}
#menu ol li a{
color:#FFFFFF;
display:block;
width:70px;
height:30px;
line-height:32px;
text-align:center;
overflow:hidden;
}
#menu ol li a:hover,#menu ol li.ok a,#menu ol li.ol a{
font-weight:bold;
background:url(images/menu1.gif) no-repeat 0px -30px;
}
#menu ol li span{
width:150px;
position:absolute;
background-color:#fefefe;
}
#menu ol li span h1{
font-size:12px;
font-family:"华文宋体";
background-color:#e6e6e6;
display:block;
}
#menu ol li span h1 a,#menu ol li.ok span h1 a,#menu ol li.ok span ul a{
color:#333333;
width:148px;
height:24px;
line-height:26px;
text-align:center;
font-weight:normal;
border-top:#FFF 1px solid;
border-bottom:#A0A0A0 1px solid;
border-right:#A0A0A0 1px solid;
background-image:none;}
#menu ol li span h1 a:hover,#menu ol li span h1.ok a
{
color:#930;
font-weight:bold;
background-image:none;
background-color::#D9D9D9;
}
#menu ol li.ok span ul
{
width:147px;
border:#E6E6E6 1px solid;
border-top:none;
overflow:hidden;
}
#menu ol li.ok span ul a {border:none;}
#menu ol li.ok span ul a:hover {
color:#930;
font-weight:bold;
text-indent:15px;
background-image:none;
}
.no{
display:none;
}-->
</style>
<script type="text/javascript" language="javascript">
function ShowMenu(obj,n){
//alert(obj:dd);
//alert(obj.parentNode:li);
var dd = obj.parentNode.getElementsByTagName("dd");
//alert(dd.length:3);
for(var i=0;i<dd.length;i++){
dd[i].className = "";
}
dd[n].className = "ok";
//alert(document.getElementById("menu"):div); var ol = document.getElementById("menu").getElementsByTagName("ol");
//alert(ol.length:3);
for(var i=0;i<ol.length;i++){
ol[i].className = "no";
}
ol[n].className = "";
}
function ShowSpan(obj,n){
// alert(obj.parentNode:ollist);
var span = obj.parentNode.getElementsByTagName("span");
//alert(span.length:6);
for(var i=0;i<span.length;i++){
span[i].className = "no";
}
span[n].className = "";
var li = obj.parentNode.getElementsByTagName("li")
//alert(li.length:6);
li[n].className = "ok";
for(var i=0;i<li.length;i++){
if(i!=n){
li[i].className = "";
}
li[i].onmouseout = function(){this.className = "ol";}
}
}
function ShowUL(obj,n){
//alert(obj.parentNode:span);
var ul = obj.parentNode.getElementsByTagName("ul");
//alert(ul.length);
var h1 = obj.parentNode.getElementsByTagName("h1");
//alert(h1.length);
for(var i=0; i<h1.length;i++){
//alert(h1[i].innerHTML);
//将'-'替换为‘+’
h1[i].innerHTML = h1[i].innerHTML.replace("-","+");
h1[i].className = "";
}
if(ul[n].className == "no"){
ul[n].className = "";
obj.className = "ok";
obj.innerHTML = obj.innerHTML.replace("+","-");
}else{
ul[n].className = "no";
return;
}
for(var i=0; i<ul.length;i++){
if(i!=n){
ul[i].className = "no";}
}
}
</script>
</head>
热心网友
时间：2023-07-16 12:52
你这是帖的那个什么样式啊?你给a写个背景色试试哦!
