UL是HTML中的无序列表，li是列表中的列表项。假如没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。
CSS网页布局中，除了新闻列表、链接运用UL、LI制作以外，我们通常将菜单也用UL、LI来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，并且将项目符号去掉。
我们看下面的XHTML代码：
- <ul id="nav">
- <li><a HREF="#">Div CSS教程</a></li>
- <li><a HREF="#">CSS布局实例</a></li>
- <li><a HREF="#">CSS2.0教程</a></li>
- <li><a HREF="#">CSS酷站欣赏</a></li>
- <li><a HREF="#">CSS模板下载</a></li>
- </ul>
我们建立了一个ID为nav的无序列表，包含了五个列表项LI，这就是我们的菜单了。我们通过下面的CSS代码，对它进行重新定义：
- #nav li {
- display: inline;
- list-style-type: none;
- padding: 5px 10px;
- }
对ID为nav的无序列表中的列表项LI，我们进行CSS定义。每句代码的意义解释如下：
display: inline – 内联（行内），将li限制在一行来显示；
list-style-type: none - 列表项预设标记为无，这就去掉了“方块或实心的黑点”；
padding: 5px 10px – 设置li的填充，距离上下均为5px，距离左右均为10px。
这样定义以后，我们的列表就有一个菜单的雏形了，它看上去不是很美观，我们在以后的教程中，再对它进行更加深入的修饰。
1. Let's begin! Create a new HTML document and save it as cssmenu.html. Although is better to put the CSS code in a external style sheet, in this tutorial we will put the whole CSS code in the HTML file to be easier to follow by readers.
2. Our menu is actually an unordered list element
- styled using CSS. So, in the body section of cssmenu.html put the following HTML code:
- <ul>
- <li><a HREF="#">Css</a></li>
- <li><a HREF="#">Flash</a></li>
- <li><a HREF="#">ActionScript</a></li>
- <li><a HREF="#">Javascript</a></li>
- <li><a HREF="#">SQL Server </a></li>
- <li><a HREF="#">PHP</a></li>
- </ul>
- ul{
- list-style-type:none;
- }
- li{
- display:inline;
- }
- a{
- float:left;
- width:100px;
- text-decoration:none;
- color:white;
- font-weight:bold;
- background:#999900;
- padding:5px;
- border-right:1px solid #FFFFFF;
- }
- a:hover{
- background:#CCCC00;
- }
3. Great now, we have the list, let's stylish it! Go in the HEAD section of your cssmenu.html document and put the next CSS code:
In the code above the ul list-style-type was set to none (so we have no bullet before each list element).
For having no line break between list element we set for li display property to inline.
For the a element float was set to left left and some other properties was changed for a good-looking menu. For the a element background was set to #999900 and for hover pseudo-class of the a element background was set to #CCCC00.
Hope this tutorial was helpful!
《DIV+CSS制作基于UL列表的横向导航菜单》视频教程下载：
千脑下载>>>
下载文件 CSS-LIST-MENU
Ziddu 下载>>>
下载文件 CSS-LIST-MENU
喜欢的就爱屋及乌 被雷了就诛连九族
欢迎您访问西米CC博客，本文被浏览了145次。若需要转载西米CC的原创文章，请接受如下的小小要求，所转载日志文章开端或者末尾做如下标识：
本文转载自：西米CC - http://ximicc.com
