我不看代码只看图就知道你
ul
里没有加宽度
加flaot的元素必须加宽度，而且外层也得有宽度
最后别忘了清除浮动
这样写
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>无标题文档</title>
<style
type="text/css">
body
{
font-family:Verdana
font-size:14px
margin:0}
a:link,a:visited{font-size:12pxtext-decoration:none}
a:hover{}
body,ul,li,p,form,dl,dt,dd,input
{
margin:0
padding:0
}
ul
{
list-style:none
}
#container
{margin:0
auto
width:100%}
#header
{
height:185px
background:#9c6
margin-bottom:5px}
#header
.title
{
background:url(../images/8.gif)
width:383px
height:46px
float:left
margin:40px
auto
auto
50px
}
#header
.menu{margin:100px
auto
auto
auto}
#header
.menu
ul{float:rightlist-style:nonemargin:0px
width:100%}
#header
.menu
ul
li{float:leftmargin:0
10pxdisplay:blockline-height:28px
width:100px}
#header
.menu
ul
li
a:link,#header
.menu
ul
li
a
visited{font-weight:boldcolor:#666}
#header
.menu
ul
li
a:hover{}
</style>
</head>
<body>
<body>
<div
id
="header">
<div
class="title"></div>
<div
class="menu">
<ul>
<li><a
href="#">原料信息</a></li>
<li><a
href="#">流程</a></li>
<li><a
href="#">渣系</a></li>
<li><a
href="#">热力学</a></li>
</ul>
</div>
</div>
</body>
</body>
</html>
先码好导航栏所需要的基本的HTML代码这个就不必多说具体的代码如下：
<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>
