这个就不必多说具体的代码如下：
<html>
<head>
<title>横向导航栏</title>
<style>
<!---->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
</ul>
</div>
</body>
</html>
用CSS的滑动门技术可以做 步骤：1.素材：找背景图片(图片的width与height 要与ul的一致) 2.代码：<style type="text/css">/*确定菜单的整体位置*/ body{margin-top:20pxmargin:0} /* 设置ul的样式*/ ul.menu{ font-family:Arial font-size:14pxbackground:url(滑动门技术/hdm.jpg)padding:0 0 0 8pxlist-style:noneheight:32px/*背景图片的高*/ width:400px/*背景图片的宽*/ } .menu li {float:left}/*设置#menu中的li属性 。li原本的块级元素，设置向左浮动，这样使得各列表横向排列*/ ul li a {display:block</p><p> line-height:32px</p><p> color:#ddd</p><p> text-decoration: none</p><p> padding: 0 0 0 14px</p><p> } li strong { display:block} li a:hover strong{ color:#fffbackground:url(滑动门技术/Lt_hdm.jpg) background-color:#999999} </style> </head> <body> <ul class="menu"><li><a href=" http://www.baidu.com" ><strong>CSS</strong></a></li><li><a href="#"><strong>HTML</strong></a></li><li><a href="#"><strong>Dreamweaver</strong></a></li><li><a href="#"><strong>Photoshop</strong></a></li><li><a href="#"><strong>Home</strong></a></li> </ul> </body>
