利用CSS制作竖直排列菜单

1、首先建立HTML相关结构，将菜单的各个项用项目列表<ul>表示，同时设置页面的背景颜色，代码如下。

<div id="navigation">

 

<ul>

 

    <li><a href="#">Home</a></li>

 

    <li><a href="#">Contact us</a></li>

 

    <li><a href="#">Web Dev</a></li>

 

    <li><a href="#">Web Design</a></li>

 

    <li><a href="#">Map</a></li>

 

</ul>

 

</div>

此时效果如下图所示。

2、然后开始设置CSS样式，首先把页面的背景色设置为浅色，代码如下。

body{

      background-color:#dee0ff;

} 

此时页面的效果只是最普通的项目列表。

3、设置整个<div>块的宽度为固定150像素，并设置文字的字体。设置项目列表<ul>的属性，将项目符号设置为不显示。

#navigation {

 

    width:150px;

 

    font-family:Arial;

 

    font-size:14px;

 

    text-align:right

 

}

 

#navigation ul {

 

    list-style-type:none;                /* 不显示项目符号 */

 

    margin:0px;

 

    padding:0px;

 

}通过以上设置后，项目列表使显示为普通的超链接列表。此时效果如下图所示。

4、为<li>标记添加下边线，以分割各个超链接，并且对超链接<a>标记进行整体设置，如下所示。

#navigation li {

 

    border-bottom:1px solid #9F9FED;    /* 添加下划线 */

 

}

 

#navigation li a{

 

    display:block;

 

    height:1em;

 

    padding:5px 5px 5px 0.5em;

 

    text-decoration:none;

 

    border-left:12px solid #151571;        /* 左边的粗边 */

 

    border-right:1px solid #151571;        /* 右侧阴影 */

 

}以上代码中需要特别说明的是“display:block;”语句，通过该语句，超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会被激活，而不是仅在文字上方时才被激活。

5、最后设置超链接的样式，以实现动态菜单的效果，代码如下。#navigation li a:link, #navigation li a:visited{

 

    background-color:#1136c1;

 

    color:#FFFFFF;

 

}

 

#navigation li a:hover{                    /* 鼠标经过时 */

 

    background-color:#002099;            /* 改变背景色 */

 

    color:#ffff00;                        /* 改变文字颜色 */

 

    border-left:12px solid yellow;

 

}代码的具体含义都在注释中一一说明了，这里不再重复。此时导航菜单便制作完成了，最终的效果如效果图所示，在IE与Firefox两种浏览器中的显示效果是一致的。​