利用项目符号和样式无需表格建立菜单菜单

利用项目符号和样式无需表格建立菜单菜单

<html>

<head>

<title>无需表格的菜单</title>

<style>

<!--

body{

     background-color:#ffffff;

}

#navigation {

     width:200px;

     font-family:Arial;

}

#navigation ul {

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

     margin:0px;

     padding:0px;

}

#navigation li {

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

}

#navigation li a{

     display:block;                            /* 区块显示*/

     padding:5px 5px 5px 0.5em;

     text-decoration:none;

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

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

}

#navigation li a:link, #navigation li a:visited{

     background-color:#8CC6FF;

     color:#0000FF;

}

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

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

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

}

-->

</style>

</head>

<body>

<div id="navigation">

     <ul>

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

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

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

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

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

     </ul>

</div>

</body>

</html>