关于li换行有关问题

关于li换行问题
下面是只有一行导航菜单，我想在联系我们这里换行，在下面再加一行，也就是最终有二行菜单，这菜单是用li做的，不知道咋换行

HTML code

&lt;style type="text/css"&gt;&lt;!--*{margin:0;padding:0;border:0;}body {  font-family: arial, 宋体, serif;font-size:12px;}#menu {   line-height: 24px; list-style-type: none; background:#666;}#menu a {  display: block; width: 80px; text-align:center;}#menu a:link {  color:#666; text-decoration:none;}#menu a:visited {  color:#666;text-decoration:none;}#menu a:hover {  color:#FFF;text-decoration:none;font-weight:bold;}#menu li {  float: left; width: 80px; background:#CCC;}#menu li a:hover{  background:#999;}#menu li ul {  line-height: 27px; list-style-type: none;text-align:left;  left: -999em; width: 180px; position: absolute; }#menu li ul li{  float: left; width: 180px;  background: #F6F6F6; }#menu li ul a{  display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;}#menu li ul a:link {  color:#666; text-decoration:none;}#menu li ul a:visited {  color:#666;text-decoration:none;}#menu li ul a:hover {  color:#F3F3F3;text-decoration:none;font-weight:normal;  background:#C00;}#menu li:hover ul {  left: auto;}#menu li.sfhover ul {  left: auto;}#content {  clear: left; }--&gt;&lt;/style&gt;&lt;script type=text/javascript&gt;function menuFix() {  var sfEls = document.getElementById("menu").getElementsByTagName("li");  for (var i=0; i&lt;sfEls.length; i++) {    sfEls[i].onmouseover=function() {    this.className+=(this.className.length&gt;0? " ": "") + "sfhover";    }    sfEls[i].onMouseDown=function() {    this.className+=(this.className.length&gt;0? " ": "") + "sfhover";    }    sfEls[i].onMouseUp=function() {    this.className+=(this.className.length&gt;0? " ": "") + "sfhover";    }    sfEls[i].onmouseout=function() {    this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");    }  }}window.onload=menuFix;&lt;/script&gt;&lt;ul id="menu"&gt;&lt;li&gt;&lt;a href="#"&gt;产品介绍&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;服务介绍&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;成功案例&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;案例三&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;案例&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;在线演示&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;联系&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;

[解决办法]
1.直接加换行符<br><br>
....
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>

</ul>
</li>

</ul>
<br><br>
<ul id="menu">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
...
</ul>

2.可以加上表格进行设置
[解决办法]

HTML code

&lt;style type="text/css"&gt;&lt;!--*{margin:0;padding:0;border:0;}body {  font-family: arial, 宋体, serif;font-size:12px;}#menu {   line-height: 24px; list-style-type: none; background:#666; width:480px;}#menu a {  display: block; width: 80px; text-align:center;}#menu a:link {  color:#666; text-decoration:none;}#menu a:visited {  color:#666;text-decoration:none;}#menu a:hover {  color:#FFF;text-decoration:none;font-weight:bold;}#menu li {  float: left; width: 80px; background:#CCC;}#menu li a:hover{  background:#999;}#menu li ul {  line-height: 27px; list-style-type: none;text-align:left;  left: -999em; width: 180px; position: absolute; }#menu li ul li{  float: left; width: 180px;  background: #F6F6F6; }#menu li ul a{  display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;}#menu li ul a:link {  color:#666; text-decoration:none;}#menu li ul a:visited {  color:#666;text-decoration:none;}#menu li ul a:hover {  color:#F3F3F3;text-decoration:none;font-weight:normal;  background:#C00;}#menu li:hover ul {  left: auto;}#menu li.sfhover ul {  left: auto;}#content {  clear: left; }--&gt;&lt;/style&gt;&lt;script type=text/javascript&gt;function menuFix() {  var sfEls = document.getElementById("menu").getElementsByTagName("li");  for (var i=0; i&lt;sfEls.length; i++) {    sfEls[i].onmouseover=function() {    this.className+=(this.className.length&gt;0? " ": "") + "sfhover";    }    sfEls[i].onMouseDown=function() {    this.className+=(this.className.length&gt;0? " ": "") + "sfhover";    }    sfEls[i].onMouseUp=function() {    this.className+=(this.className.length&gt;0? " ": "") + "sfhover";    }    sfEls[i].onmouseout=function() {    this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");    }  }}window.onload=menuFix;&lt;/script&gt;&lt;ul id="menu"&gt;&lt;li&gt;&lt;a href="#"&gt;产品介绍&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;服务介绍&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;成功案例&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;案例三&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;案例&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;在线演示&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;联系&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;产品介绍&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;服务介绍&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;成功案例&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;案例三&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;案例&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;在线演示&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;  &lt;ul&gt;  &lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#"&gt;联系&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;

关于li换行有关问题

热点推荐