<!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=gb2312" />
<title>title</title>
</head>
<style type="text/css">
/* Set up the default font and ovrall size to include image */
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif,"宋体";
font-size: 12px;
}
/* style the outer div to give it width */
.menu {
font-size:12px;
background:url(images/menu_bg.png) repeat-x left;
border:solid 1px #bcbcbc;
height:25px;
width:370px;
padding-left:20px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
height:25px;
background:transparent;
}
/* style the sub-level lists */
.menu ul ul {
width:240px;
}
/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {
float:left;
height:25px;
line-height:25px;
display:block;
}
/* style the sub level list items */
.menu ul ul li {
display:block;
width:150px;
height:auto;
line-height:25px;
background:#fcfde6;
}
.menu ul ul ul li {
display:block;
width:170px;
height:auto;
line-height:25px;
background:#f5f5f5;
border-left:solid 0px #000;
border-right:solid 0px #b0afaf;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
float:left;
height:100%;
width:auto;
font-size:1em;
text-decoration:none;
color:#333;
padding:0 15px;
border-left:solid 0px #bcbcbc ;
border-right:solid 0px #bcbcbc;
}
/* hack IE5.x to get the correct the faulty box model and get the width right */
* html .menu a, * html .menu a:visited {
width:auto;
w\idth:auto;
padding:0 5px;
}
/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {
display:block;
color:#333;
width:150px;
height:25px;
line-height:25px;
padding:2px 5px;
}
* html .menu ul ul a, * html .menu ul ul a:visited {
width:auto;
w\idth:auto;
padding:0 5px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size:1em; z-index:1;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
width:auto;
}
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#c4ceac ;}
/* style the sub level 1 background */
.menu ul :hover a.sub1 {/*background:#447b7b;*/}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {/*background:#447b7b;*/}
/* style the level hovers */
/* first */
* html .menu a:hover {
color:#000;
background:#ffffff url(images/menu_active_bg.png) center center;
position:relative;
z-index:100;
border-left:solid 1px #bcbcbc;
border-right:solid 1px #bcbcbc;
}
.menu li:hover {
position:relative;
}
.menu :hover > a {
color:#000;
background:#d4d8bd url(images/menu_active_bg.png) center center;
border-left:solid 1px #bcbcbc;
border-right:solid 1px #bcbcbc;
}
/* second */
* html .menu ul ul a:hover{
color:#000;
background: url(images/sub_active_bg.png) repeat-x;
border: 1px solid #c4c5a6;
position:relative;
z-index:110;
width:138px;
padding:0 5px;
height:23px;
}
.menu ul ul li:hover {
position:relative;
}
.menu ul ul :hover > a {
color:#000;
background: url(images/sub_active_bg.png) repeat-x center;
border: 1px solid #c4c5a6;
width:138px;
padding:0 5px;
height:23px !important;
height:24px;
}
/* third */
* html .menu ul ul ul a:hover {
position:relative;
z-index:120;
width:158px;
height:20px;
}
.menu ul ul ul :hover > a {
width:158px;
height:23px !important;
height:24px;
}
/* fourth */
.menu ul ul ul ul a:hover {
background:#f5f5f5;
position:relative;
z-index:130;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:25px; left:0; width:150px;}
/* position the third level flyout menu */
.menu ul ul ul{
left:12em;
top:3px;
background:#ffffff url(images/third_bg.png) repeat-x center;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
height:auto;
margin:0px 3em 0 3em;
padding:3px 0 0 0!important;
*padding:0px !important;
padding:0px;
background:transparent;
left:-3em;
width:150px;
border:solid 1px #b0afaf;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible; left:9em; width:170px; padding:0 0px;border-left:solid 1px #b0afaf;
border-right:solid 1px #b0afaf;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
.menu_icon{
padding-left:5px;
padding-top:15px;
}
img{
border:none;
}
.menu_font{
padding-left:2px;
}
.menu_pic{
padding-left:5px;
}
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">添加新动作<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">
<span class="menu_font">删除和添加行列wwwwwwwwwwwwwwwwwwww</span>
<span class="menu_pic"></span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">
<span class=""></span>
<span class="menu_font">合并单元格</span>
<span class="menu_pic"></span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
上面的代码里，当我的文字内容过长时，在IE6中可以自动换行，但是在IE7和火狐中就不能自动换行，请高手指点一下，是不是哪里写错了...
7 个解决方案
#1
white-space
ul,li{list-style:none;white-space:nowrap}
.li{ float:left;padding:0px; margin:0px; white-space:nowrap;}
.liForCity{ float:left;padding:0px 0px 0px 10px; margin:0px}
楼主结贴 吧 哈哈 就这样 我也刚 遇见这个问题 在 FF 下 是正常的 IE6 IE7 D不正常显示 加上
list-style:none; white-space:nowrap 后者是主要的 前边是把那个 点点去掉 呵呵
#2
Opera 10
IE6 IE7
Mozilla Firefox
均显示正常了 呵呵 我要分 给了就结贴撒 哈哈
IE6 IE7
Mozilla Firefox
均显示正常了 呵呵 我要分 给了就结贴撒 哈哈
#3
好贴,找了好久.谢谢.
#4
非常感谢，这个一直困扰我很常一段时间的问题终于得到解决了，真的非常感谢！
#5
该回复于2015-05-26 10:27:06被管理员删除
#6
真的非常感谢！
#7
非常感谢 找了好久
#1
white-space
ul,li{list-style:none;white-space:nowrap}
.li{ float:left;padding:0px; margin:0px; white-space:nowrap;}
.liForCity{ float:left;padding:0px 0px 0px 10px; margin:0px}
楼主结贴 吧 哈哈 就这样 我也刚 遇见这个问题 在 FF 下 是正常的 IE6 IE7 D不正常显示 加上
list-style:none; white-space:nowrap 后者是主要的 前边是把那个 点点去掉 呵呵
#2
Opera 10
IE6 IE7
Mozilla Firefox
均显示正常了 呵呵 我要分 给了就结贴撒 哈哈
IE6 IE7
Mozilla Firefox
均显示正常了 呵呵 我要分 给了就结贴撒 哈哈
#3
好贴,找了好久.谢谢.
#4
非常感谢，这个一直困扰我很常一段时间的问题终于得到解决了，真的非常感谢！
#5
该回复于2015-05-26 10:27:06被管理员删除
#6
真的非常感谢！
#7
非常感谢 找了好久