如果是导航菜单可以使用ul无需列表来制作
同时使用CSS中的float：left来控制li靠左浮动即可实现横向菜单
注意UL或UL的父级容器宽度必须大于所有li宽度的和
例如
<style>ul {
padding:0
margin:0
list-style:none
width:600px
height:50px
line-height:50px
text-align:center
}
ul li {
width:100px
height:50px
float:left
}
<style>
<ul>
<li>菜单项目1</li>
<li>菜单项目2</li>
<li>菜单项目3</li>
<li>菜单项目4</li>
<li>菜单项目5</li>
<li>菜单项目6</li>
<ul>
这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>menu </TITLE>
</HEAD>
<style>
body{
padding-top:200px
text-align:center
font-size:13px
}
#content{
margin:0 auto
text-align:left
width:720px
background:orange
background-color:black
}
ul{
margin-top:1px
list-style:none
}
#father li{
float:left
position:relative
margin-right:10px
width:120px
text-align:center
border:1px solid black
border-bottom:none
}
#father li a:link,#father li a:visited{
line-height:30px
color:darkred
font-weight:bold
}
#father li ul *{
float:none
margin-right:0px
padding:0
color:none
width:90px
background-color:orange
border:none
}
.child{
position:absolute
top:29px
right:0px
display:none
}
#father li ul li a:link,#father li ul li a:visited{
margin:1px
color:blue
text-decoration:none
font-weight:normal
line-height:20px
}
#father li ul li a:hover{
background-color:white
}
</style>
<script>
function showMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "none"
document.getElementById(id1).style.color = "white"
document.getElementById(id2).style.display = "block"
emt.style.backgroundColor = "orange"
emt.style.borderColor = "white"
}
function hiddenMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "underline"
document.getElementById(id1).style.color = "darkred"
document.getElementById(id2).style.display = "none"
emt.style.backgroundColor = "black"
emt.style.borderColor = "black"
}
</script>
<BODY>
</table>
<div id="content">
<ul id="father">
<li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')">
<a id="a1" href="#">主页</a>
<ul id="ul1" class="child">
<li><a href="#">文字测试</a></li>
<li><a href="#">使用中文字符</a></li>
<li><a href="#">你看可以吗</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')">
<a id="a2" href="#">程序设计</a>
<ul id="ul2" class="child">
<li><a href="#">JAVA</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">C#.NET</a></li>
<li><a href="#">游戏开发</a></li>
<li><a href="#">汇编</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')">
<a id="a3" href="#">网页技术</a>
<ul id="ul3" class="child">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')">
<a id="a4" href="#">动态网页</a>
<ul id="ul4" class="child">
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')">
<a id="a5" href="#">关于我</a>
<ul id="ul5" class="child">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
<div>
</BODY>
</HTML>
纵向使用鼠标滚轮控制：可以设置页面的长度大于显示屏分辨率（可以设置body的height参数为3000px），多余的部分就以鼠标滚轮查看。
横向滚动条控制：在内容div或者article中设置横向长度大于屏幕分辨率，或者在父盒子设置overflow：scroll，多出的部分就使用滚动条显示。
从网页的美观性和用户体验角度，最好设置页面单向（纵向滚动）。横向滚动用户体验效果不是很好。
