css学习2----css动态菜单
这里是一个没有用table标签的动态效果菜单：
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test4_css.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/test4_css.css" type="text/css"></link></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="#">CONTACTS</a></li>
</ul>
</div>
</body>
</html>
css代码：
body{
border-color: #ffdee0;
}
#navigation{
width:200px;
font-family: Arial;
}
#navigation ul{
list-style-type: none; /* 去掉项目符号*/
margin: 0px;
padding:0px;
}
#navigation li{
border-bottom: 1px solid #ed9f9f; /* 添加下划线 */
}
#navigation li a{
display: block; /* 区块显示 */
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
}
#navigation li a:link, #navigation li a:visited:visited { /*正常连接*/
background-color: #c11136;
color: #ffffff;
}
#navigation li a:hover{ /*鼠标经过时*/
background-color: #990020;
color: #ffff00;
}
