ul, li { margin: 0pxpadding: 0px}
ul { list-style: none}
a { font-size: 12pxcolor: #000000text-decoration: none}
.navWrapper { width: 100pxheight: 30px}
.navWrapper ul li { position: relative}
.navWrapper ul li ul { display: noneposition: absoluteleft: 0pxtop: 30pxwidth: 100px}
.navWrapper a { display: blockheight: 30pxline-height: 30pxtext-align: centerbackground: #FF99CC}
.navWrapper ul li:hover ul { display: block}
.navWrapper ul li ul li a { color: #FFFFFFbackground: #000000}
页面代码改成这样
<div class="navWrapper">
<ul>
<li><a href="#">快速链接</a>
<ul>
<li><a href="http://www.webjx.com/">网页教学网</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</li>
</ul>
</div>
测试要在IE8以上版本哦！
原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px(像素)，那你上传的图片或放入网页的图片宽度就要小于500px，也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下，进行图片编辑处理的。
二、防止图片撑开DIV方法二
如果不处理照片方法适应DIV有限宽度，那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。
三、解决方法三
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片，不会影响图片画面质量。
比如你的网页DIV宽度为500px，那你上传图片后对img标签设置width等于500以下即可。
即可解决图片过宽导致DIV SPAN撑破，这样好处可以等比例放大缩小图片。
四、CSS解决撑破方法四
这种方法使用CSS直接对div内的img进行宽度设置，这样不好是如果图片过小会影响网页浏览图片时候效果。
对，.list做绝对定位就可以了。浮动是float，这个效果主要用到的是绝对定位而不是浮动。
li做了浮动，float:left这样是让各个Li横向显示。
容器li设定相对定位，里面的list绝对定位就不会跑偏了。
<style>
ul,li{ margin:0pxpadding: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:30pxleft: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>
