div+css 导航条 下拉菜单不隐藏
就是想鼠标放在“首页"按钮上那个“下拉1”才显示现在不知道怎么的它不放在上面也一直显示以下是代码：这个是网页的：<divid="navcontainer"><ulid="...
就是想鼠标放在“首页"按钮上 那个“下拉1” 才显示
现在不知道怎么的它不放在上面也一直显示
以下是代码：
这个是网页的：
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.dqsy.net/dqsy/huaxuehuagongxueyuan/" id="">首页</a>
<ul>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉1</a></li>
</ul>
</li>
<li><a href="#">学院简介</a></li>
<li><a href="#">师资队伍</a></li>
<li><a href="#">学科建设</a></li>
<li><a href="#">教学工作</a></li>
<li><a href="#">科研工作</a></li>
<li><a href="#">研究生教育</a></li>
<li><a href="#">党建工会</a></li>
这个是css的：
#container {
width : 900px;
border : 5px solid #fff;
margin-left : auto;
margin-right : auto;
padding : 10px;
color : #666;
background : #f2f2f5;
}
/*TOP BANNERs*/
#banner {
float : left;
width : 100%;
height : 160px;
padding : 0;
margin-bottom : 15px;
color : #666;
background : inherit;
}
#bannerb {
float : right;
width : 200px;
margin : 0 0 15px 10px;
padding : 0;
color : #666;
background : #f2f2f5;
}
/*TOP MENU*/
#navcontainer {
clear : both;
position: relative;
width : 100%;
font-size:8px;
}
#navcontainer ul {
float : left;
width : 100%;
padding-left : 0;
margin-left : 0;
background : #036;
color : #fff;
}
#navcontainer ul li {
display : inline;
}
#navcontainer ul li a {
float : left;
padding : 0.2em 1em;
text-decoration : none;
border-right : 1px solid #fff;
background : #036;
color : #fff;
}
#navcontainer ul li a:hover {
background : #a1aac9;
color : #fff;
} 展开
现在不知道怎么的它不放在上面也一直显示
以下是代码：
这个是网页的：
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.dqsy.net/dqsy/huaxuehuagongxueyuan/" id="">首页</a>
<ul>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉1</a></li>
</ul>
</li>
<li><a href="#">学院简介</a></li>
<li><a href="#">师资队伍</a></li>
<li><a href="#">学科建设</a></li>
<li><a href="#">教学工作</a></li>
<li><a href="#">科研工作</a></li>
<li><a href="#">研究生教育</a></li>
<li><a href="#">党建工会</a></li>
这个是css的：
#container {
width : 900px;
border : 5px solid #fff;
margin-left : auto;
margin-right : auto;
padding : 10px;
color : #666;
background : #f2f2f5;
}
/*TOP BANNERs*/
#banner {
float : left;
width : 100%;
height : 160px;
padding : 0;
margin-bottom : 15px;
color : #666;
background : inherit;
}
#bannerb {
float : right;
width : 200px;
margin : 0 0 15px 10px;
padding : 0;
color : #666;
background : #f2f2f5;
}
/*TOP MENU*/
#navcontainer {
clear : both;
position: relative;
width : 100%;
font-size:8px;
}
#navcontainer ul {
float : left;
width : 100%;
padding-left : 0;
margin-left : 0;
background : #036;
color : #fff;
}
#navcontainer ul li {
display : inline;
}
#navcontainer ul li a {
float : left;
padding : 0.2em 1em;
text-decoration : none;
border-right : 1px solid #fff;
background : #036;
color : #fff;
}
#navcontainer ul li a:hover {
background : #a1aac9;
color : #fff;
} 展开
6个回答
展开全部
div+CSS自制导航条，简单的小例子：
<style>
* {margin:0; padding:0; list-style:none;}
#ul1 {width:954px; margin:10px auto;}
#ul1 li {width:104px; height:36px; border:1px solid #999; float:left; position:relative;}
#ul1 li span {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; line-height:36px; z-index:2;}
#ul1 li em {position:absolute; left:0; bottom:0; width:100%; height:0; z-index:1; opacity:0.4; filter:alpha(opacity:40);}
</style>
<script src="move.js"></script>
<script>
window.onload=function (){
var aLi=document.getElementById('ul1').children;
var aEm=document.getElementsByTagName('em');
for (var i=0; i<aLi.length; i++)
{
(function (index){
aLi[i].onmouseover=function (){
for (var i=0; i<aEm.length; i++)
{
move(aEm[i], {height:0}, {'duration':1000,'easing':'ease-in'});
}
move(aEm[index], {height: 36}, {'duration':1000,'easing':'ease-out'});
};
})(i);
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>
<span>我的主页</span>
<em style="background:#F00"></em>
</li>
<li>
<span>新闻头条</span>
<em style="background:#0F0"></em>
</li>
<li>
<span>电视剧</span>
<em style="background:#00F"></em>
</li>
<li>
<span>最新电影</span>
<em style="background:#F0F"></em>
</li>
<li>
<span>小游戏</span>
<em style="background:#FF0"></em>
</li>
<li>
<span>小说大全</span>
<em style="background:#0FF"></em>
</li>
<li>
<span>旅游度假</span>
<em style="background:#C0F"></em>
</li>
<li>
<span>品牌特卖</span>
<em style="background:#F0C"></em>
</li>
<li>
<span>今日团购</span>
<em style="background:#0CC"></em>
</li>
</ul>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我给你说下思想：你的html中的这一段
<ul><li id="active"><a href="http://www.dqsy.net/dqsy/huaxuehuagongxueyuan/" id="">首页</a>
<ul>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉1</a></li>
</ul>
这块的<ul>放的不对，导航中首页，学院简介等放在ul的li里，不要把首页单独放在ul中，然后呢在目的不是要给首页加二级导航吗，就给首页的这个li加个<span>,在span里加首页样式，然后在li里加二级导航，放在<span></span>外面。给你写下格式(内容自己添加）：
<ul>
<li><span div id=...>首页</span>
<div id=...>下拉1， 下拉2
</li>
<li>学院简介</li>
...
</ul>
要加div内容的和链接的自己加。
注意：li里没有放UL的
<ul><li id="active"><a href="http://www.dqsy.net/dqsy/huaxuehuagongxueyuan/" id="">首页</a>
<ul>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉1</a></li>
</ul>
这块的<ul>放的不对，导航中首页，学院简介等放在ul的li里，不要把首页单独放在ul中，然后呢在目的不是要给首页加二级导航吗，就给首页的这个li加个<span>,在span里加首页样式，然后在li里加二级导航，放在<span></span>外面。给你写下格式(内容自己添加）：
<ul>
<li><span div id=...>首页</span>
<div id=...>下拉1， 下拉2
</li>
<li>学院简介</li>
...
</ul>
要加div内容的和链接的自己加。
注意：li里没有放UL的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
...ie的臭虫而已，swf或select会始终出现在页面最上层，解决方法很简单，给要显示的div加个iframe的背景，如：
<div style="position:relative;">content<iframe style="width:100%;height:100%;position:absoult;top:0;left:0;"></iframe></div>
或者你也可以用jquery的bgiframe插件。
<div style="position:relative;">content<iframe style="width:100%;height:100%;position:absoult;top:0;left:0;"></iframe></div>
或者你也可以用jquery的bgiframe插件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以加
#navlist ul{display:none}
#navlist ul:hover{display:block}
不过这也最多在ie7 8 ff下可以 ie6下是不只是除了a元素意外的hover伪类的！
#navlist ul{display:none}
#navlist ul:hover{display:block}
不过这也最多在ie7 8 ff下可以 ie6下是不只是除了a元素意外的hover伪类的！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
加上一个规则
#navcontainer ul li ul{
display : none;
}
这样就能隐藏了
#navcontainer ul li ul{
display : none;
}
这样就能隐藏了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
