50-简单的竖直排列的菜单

来源：互联网发布：北京淘宝科技有限公司编辑：程序博客网时间：2024/05/16 09:22

<html><head><title>简单的数值排列菜单</title><style type="text/css">/*设置背景颜色为浅色*/body{   background-color:#dee0ff;}/*设置整个Div块的宽度为150像素，并设置文字的字体*/#navigation{  width:150px;  font-family:Arial;  font-size:14px;  text-align:right;}/*不显示项目符号*/#navigation ul{list-style-type:none;margin:0px;padding:0px;}/*添加下边线*/#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;/*右侧阴影*/}/*设置超链接的样式，以实现动态菜单的效果*/#navigation li a:link,#navigation li a:activted{  background-color:#1136c1;  color:#ffffff;}#navigation li a:hover{  background-color:#002099;/*鼠标经过时候改变背景颜色*/  color:#ffff00;  border-left:12px solid yellow;}</style></head><body><div id="navigation">   <ul>      <li><a href="#">Home</a></li>  <li><a href="#">Contect 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></body></html>

更改成横向的菜单

<html><head><title>简单的数值排列菜单</title><style type="text/css">/*设置背景颜色为浅色*/body{   background-color:#dee0ff;}/*设置整个Div块的宽度为150像素，并设置文字的字体*/#navigation{  font-family:Arial;  font-size:14px;  text-align:right;}/*不显示项目符号*/#navigation ul{list-style-type:none;margin:0px;padding:0px;}/*添加下边线*/#navigation li{   float:left;   border-bottom:1px solid #9f9fed;}#navigation li a{  width:120px;  display:block;  height:1em;  padding:5px 5px 5px 0.5em;  text-decoration:none;  border-left:12px solid #151571;/*左边的粗边*/  border-right:1px solid #151571;/*右侧阴影*/}/*设置超链接的样式，以实现动态菜单的效果*/#navigation li a:link,#navigation li a:activted{  background-color:#1136c1;  color:#ffffff;}#navigation li a:hover{  background-color:#002099;/*鼠标经过时候改变背景颜色*/  color:#ffff00;  border-left:12px solid yellow;}</style></head><body><div id="navigation">   <ul>      <li><a href="#">Home</a></li>  <li><a href="#">Contect 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></body></html>