Question

css 下拉菜单撑开下面的div

我是CSS新手 不会做太高深的下拉菜单 我这个 是网上找的一个简单的下拉菜单改的 但是会撑开下面的DIV 如果我弄浮起来的话 我怕如果换了分辨率会跑出外面大的div 请高手指教下这么修改啊？
代码是这样的：
/*导航条下拉菜单*/
ul, li
{
margin: 0px;
padding: 0px;
}
li
{
display: inline;
list-style: none;
list-style-position: outside;
text-align: center;
font-weight: bold;
float: left;
}
#nav
{
width: 980px;
height: 30px;
border-bottom: 0px;
padding: 0px 5px;
z-index: 1;
background: url(../images/topmenu.gif) no-repeat;
}
#nav a:link, a:visited
{
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: #000;
text-decoration: none;
padding: 0px 0px 0px 4px;
}
.list
{
font-size: 13px;
line-height: 20px;
text-align: left;
padding: 4px;
width: 69px;
font-weight: normal;
background-color: #FF9933 !important;
background-color: #ff6600;
}
.menu1
{
width: 69px;
height: auto;
font-size: 13px;
margin: 6px 0px 0px 0px;
color: #000;
padding: 5px 0px 0px 0px;
cursor: hand;
overflow-y: hidden;
overflow-x: hidden;
-moz-opacity: 0.5;
filter: Alpha(opacity=70);
}
.menu2
{
width: 69px;
height: 15px;
font-size: 13px;
margin: 6px 0px 0px 0px;
color: #fff;
padding: 3px 0px 0px 0px;
overflow-y: hidden;
overflow-x: hidden;
cursor: hand;
}
<div di="nav">
<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">
<a href="#">在线办事</a>
<div class="list">
<a href="#">网上咨询</a><br />
<a href="#">资料下载</a><br />
<a href="#">网上受理</a><br />
<a href="#">网上投诉</a><br />
</div>
</li>
</div>
我现在是用#nav浮起来
position:absolute;
left: 10px !important;
top: 200px !important;
我css水平不怎么样 4楼的意思是不是让下拉框的那个list浮起来 nav不浮？

Answer 1

对，.list做绝对定位就可以了。
浮动是float，这个效果主要用到的是绝对定位而不是浮动。

li做了浮动，float:left; 这样是让各个Li横向显示。

容器li设定相对定位，里面的list绝对定位就不会跑偏了。

<style>
ul,li{ margin:0px; padding:0px;}
#nav
{
margin:0px;
width: 980px;
height: 30px;
padding: 0px 5px;
background:#FF9933 url(../images/topmenu.gif) no-repeat;
}
#nav a:link, a:visited
{
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: #000;
text-decoration: none;
}
#nav li
{
text-align:center;
font-weight: bold;
float: left;
display: inline;
padding:0px 4px;
line-height:30px;
margin-right:10px;
position:relative; /*容器相对定位，里面的.list绝对定位就不会跑偏了。*/
}
#nav div.list
{
display:none;
font-size: 13px;
line-height: 20px;
text-align: left;
padding: 4px;
width: 69px;
font-weight: normal;
background-color:#FF9933;
position:absolute;
top:30px; left:0px;
}
#nav li.menu1 div.list{ display:block;}
</style>
<div id="nav">
<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">
<a href="#">在线办事</a>
<div class="list">
<a href="#">网上咨询</a><br />
<a href="#">资料下载</a><br />
<a href="#">网上受理</a><br />
<a href="#">网上投诉</a><br />
</div>
</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>
</div>
<div id="content">测试测试测试</div>

Answer 2

当然是要浮起的，。

<div id="外框架"><div id="你的菜单">Cont</div></div>

这样就不会跑了。TOP、LEFT设置下。

Answer 3

撑开是因为你的那个层定义了高度的 你设置修改下高度就好了

Answer 4

代码不全，无法测试