html+css做的二级菜单影响到下面的DIV了，求解？

在网上查了好像是什么绝对定位和相对定位，我生手，始终弄不出来，求大神支招帮我改下代码并改后帮我备注下改了的地方！<stype>*{margin:0px;}body{bac... 在网上查了好像是什么绝对定位和相对定位，我生手，始终弄不出来，求大神支招帮我改下代码并改后帮我备注下改了的地方！

<stype>
*{margin:0px;}
body{background-image:url();
background-attachment:fixed;

}
#header{width:990px;
height:120px;
margin-left:auto;
margin-right:auto;
background:url()
}
#logo{
width:150px;
height:100px;
margin:10px 0px 0px 10px;
float:left;
}
#name{
width:820px;
height:100px;
margin:10px 0px 0px 10px;
float:right;
}
/*以上是header部分*/
#navigation-bar{
width:auto;
height:50px;
margin-top:2px;
color:#FFFFFF;
background-image:url()
}
#center{
width:990px;
height:50px;
margin:0px auto;
}
ul{
margin:0px;
padding:0px;
}
#center ul li{
float:left;
width:141px;
height:50,px;
list-style:none;
line-height:50px;
text-align:center;
}
#center ul li:hover{
background-image:url()
}
#center ul li ul li{
position:relative;
left:0px; top:0px;
display:none;
}
#center ul li:hover ul li{
display:block;
}
/*以上是导航栏*/
#focus-picture{width:990px; height:300px;}
</stype>
<div id="header">
<div id="logo"><img src=""></div>
<div id="name"><img src=""></div>
</div>
<div id="navigation-bar">
<div id="center">
<ul>
<li>首页</li>
<li>简介</li>
<li>名片
<ul>
<li>商务</li>
<li>简约</li>
<li>创意</li>
</ul>
</li>
<li>灯箱
<ul>
<li>落地式</li>
<li>挂墙式</li>
<li>房顶式</li>
</ul>
</li>
<li>画册</li>
<li>其它
<ul>
<li>海报</li>
<li>手提袋</li>
<li>动画</li>
<li>T恤衫</li>
</ul>
</li>
<li>联系</li>
</ul>
</div>
</div>
<div id="focus-picture">1</div>
<div id="body"></div> 展开

 我来答

4个回答

#热议# 为什么有人显老，有人显年轻？

桂哥的点滴
2015-07-02 · 关注教育，产品，互联网，个人成长。

桂哥的点滴

采纳数：1042 获赞数：2173

向TA提问私信TA

关注

展开全部

你试一下，我没看到下面的那个div被影响了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0px;}
body{background-image:url();
   
}
#header{width:990px;
height:120px;
margin-left:auto;
margin-right:auto;
background:green;
}
#logo{
width:150px;
height:100px;
margin:10px 0px 0px 10px;
float:left;
}
#name{
width:820px;
height:100px;
margin:10px 0px 0px 10px;
float:right;
}
/*以上是header部分*/
#navigation-bar{
width:auto;
height:50px;
margin-top:2px;
color:black;
background-image:url()
}
#center{
width:1000px;
height:50px;
margin:0px auto;
}
ul{
margin:0px 5px;
padding:0px;
list-style: none;
}
#center ul li{
float:left;
width:141px;
height:48px;
line-height:50px;
text-align:center;
background:yellow; 
/*border:1px solid black;*/
}
#center ul li:hover{
background-image:url()
}
#center ul li ul li{
position:relative;
left:0px; top:0px;
display:none;
}
#center ul li:hover ul li{
display:block;

}
/*以上是导航栏*/
#focus-picture{width:990px; height:300px;
      background:red; margin:2px auto;
}

</style>
</head>
    <body>
<div id="header">
    <div id="logo"><img src=""></div>
    <div id="name"><img src=""></div>
</div>
<div id="navigation-bar">
<div id="center">
    <ul>
            <li>首页</li>
            <li>简介</li>
            <li>名片
            <ul>
                <li>商务</li>
                    <li>简约</li>
                    <li>创意</li>
                </ul>
            </li>
            <li>灯箱
            <ul>
                <li>落地式</li>
                    <li>挂墙式</li>
                    <li>房顶式</li>
                </ul>
            </li>
            <li>画册</li>
            <li>其它
            <ul>
                <li>海报</li>
                    <li>手提袋</li>
                    <li>动画</li>
                    <li>T恤衫</li>    
                </ul>
            </li>
            <li>联系</li>
        </ul>
    </div>
</div>
<div id="focus-picture">1</div>
<div id="body"></div>
    </body>
</html>

更多追问追答

追问

只要二级伸开，下面的DIV就被撑跑了

追答

你用是什么浏览器？

已赞过 已踩过<

评论收起

洋依辰7i
2015-07-02 · TA获得超过141个赞

知道小有建树答主

回答量：185

采纳率：100%

帮助的人：202万

我也去答题访问个人页

关注

展开全部

#center ul li{

float:left;

width:141px;

height:50px;

color: #000;

list-style:none;

line-height:50px;

text-align:center;

}

#center ul li:hover{

background-image:url()

}

#center ul li ul{

display:none;

position:relative;

left:0px; top:0px;

border: 1px solid #ccc;

border-bottom: none;

}

#center ul li ul li {

float: none;

border-bottom: 1px solid #ccc;

}

#center ul li:hover ul {

display: block;

}

/*以上是导航栏*/

替换一下CSS就OK了

追问

大神，我替换了二级菜单都没用了，你邮箱或者是QQ多少？我发给你帮我改下！

追答

373687921

已赞过 已踩过<

评论收起

AngorztS
2015-07-02 · 超过16用户采纳过TA的回答

知道答主

回答量：23

采纳率：0%

帮助的人：18.2万

我也去答题访问个人页

关注

展开全部

你下面的那个div是不是也给float属性了？去掉再看看

追问

没给

追答

方便发源文件给我看看么，qq274276153

本回答被提问者采纳

已赞过 已踩过<

评论收起

百度网友266d545
2015-07-02 · TA获得超过352个赞

知道小有建树答主

回答量：855

采纳率：50%

帮助的人：241万

我也去答题访问个人页

关注

展开全部

<div style="clear:both;"></div>
<div id="focus-picture">1</div>
在前面加一个清楚浮动的div可以吗

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

html+css做的二级菜单影响到下面的DIV了，求解？

其他类似问题

为你推荐：