css+div布局，鼠标放在一级菜单上显示二级菜单 15
一级菜单的背景每个都是不一样的，二级菜单的背景跟随一级的背景改变颜色,主要的问题是不让二级菜单继承一级菜单的父样式，还有怎样让页面默认显示二级菜单的其中一块呀,下面是我用...
一级菜单的背景每个都是不一样的，二级菜单的背景跟随一级的背景改变颜色,主要的问题是不让二级菜单继承一级菜单的父样式，还有怎样让页面默认显示二级菜单的其中一块呀,下面是我用到的图片
<!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" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li")
for (i=0; i<allli.length; i++) {
node = allli[i];
node.onmouseover=function() {
this.className+=" current";
}
node.onmouseout=function() {
this.className=this.className.replace(" current", "");
}
}
}
}
window.onload=startList;
//--><!]]></script>
<title>无标题文档</title>
<style type="text/css">
ul {
list-style:none;
}
#menu ul li.note a {
background:url(images/note1.gif) 0 0 no-repeat;
height:75px;
width:35px;
display:block;
border-bottom:solid 1px #CCC;
border-left:solid 1px #CCC;
border-top: solid 1px #CCC;
position:relative;
}
#menu ul li.note a:hover {
background:url(images/note.gif) 0 0 no-repeat;
display:block;
width:39px;
height:79px;
border:none;
position:relative;
}
#menu ul li.note {
position:relative;
}
#menu ul li.note ul {
display:none;
position: absolute;
left: 0px;
top: 0px;
background:#00F;
width:130px;
border:none;
}
#menu ul li.note.current ul {
display:block;
}
#menu ul li.note:hover ul {
display:block;
}
.pc a {
background:url(images/pc1.gif) 0 0 no-repeat;
height:95px;
width:35px;
display:block;
border-bottom:solid 1px #CCC;
border-left:solid 1px #CCC;
}
.pc a:hover {
display:block;
background:url(images/pc.gif) 0 0 no-repeat;
width:39px;
height:100px;
border:none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="note"><a href="#"> </a>
<ul>
<li><a href="#">惠普(HP)</a></li>
<li><a href="#">ThinkPad</a></li>
<li>Lenove</li>
<li>华硕</li>
<li>戴尔</li>
<li>索尼</li>
<li>三星</li>
<li>神舟</li>
<li>东芝</li>
<li>苹果</li>
<li>海尔</li>
<li>宏基</li>
<li>清华同方</li>
<li>明基</li>
<li>MSI微量</li>
<li>长城</li>
<li>方正</li>
<li>AD史密斯</li>
<li>松下</li>
<li>夏普</li>
<li>平板电脑</li>
<li>笔记本周边</li>
<li>更多品牌...</li>
</ul>
</li>
<li class="pc"><a href="#"></a></li>
</ul>
</div>
</body>
</html> 展开
<!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" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li")
for (i=0; i<allli.length; i++) {
node = allli[i];
node.onmouseover=function() {
this.className+=" current";
}
node.onmouseout=function() {
this.className=this.className.replace(" current", "");
}
}
}
}
window.onload=startList;
//--><!]]></script>
<title>无标题文档</title>
<style type="text/css">
ul {
list-style:none;
}
#menu ul li.note a {
background:url(images/note1.gif) 0 0 no-repeat;
height:75px;
width:35px;
display:block;
border-bottom:solid 1px #CCC;
border-left:solid 1px #CCC;
border-top: solid 1px #CCC;
position:relative;
}
#menu ul li.note a:hover {
background:url(images/note.gif) 0 0 no-repeat;
display:block;
width:39px;
height:79px;
border:none;
position:relative;
}
#menu ul li.note {
position:relative;
}
#menu ul li.note ul {
display:none;
position: absolute;
left: 0px;
top: 0px;
background:#00F;
width:130px;
border:none;
}
#menu ul li.note.current ul {
display:block;
}
#menu ul li.note:hover ul {
display:block;
}
.pc a {
background:url(images/pc1.gif) 0 0 no-repeat;
height:95px;
width:35px;
display:block;
border-bottom:solid 1px #CCC;
border-left:solid 1px #CCC;
}
.pc a:hover {
display:block;
background:url(images/pc.gif) 0 0 no-repeat;
width:39px;
height:100px;
border:none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="note"><a href="#"> </a>
<ul>
<li><a href="#">惠普(HP)</a></li>
<li><a href="#">ThinkPad</a></li>
<li>Lenove</li>
<li>华硕</li>
<li>戴尔</li>
<li>索尼</li>
<li>三星</li>
<li>神舟</li>
<li>东芝</li>
<li>苹果</li>
<li>海尔</li>
<li>宏基</li>
<li>清华同方</li>
<li>明基</li>
<li>MSI微量</li>
<li>长城</li>
<li>方正</li>
<li>AD史密斯</li>
<li>松下</li>
<li>夏普</li>
<li>平板电脑</li>
<li>笔记本周边</li>
<li>更多品牌...</li>
</ul>
</li>
<li class="pc"><a href="#"></a></li>
</ul>
</div>
</body>
</html> 展开
展开全部
主要的问题是不让二级菜单继承一级菜单的父样式
答：二级菜单设置单独的样式名，并且调用。
还有怎样让页面默认显示二级菜单的其中一块
答：把默认显示的单独加一个需要显示的样式
答：二级菜单设置单独的样式名，并且调用。
还有怎样让页面默认显示二级菜单的其中一块
答：把默认显示的单独加一个需要显示的样式
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
