纯CSS制作菜单栏当鼠标经过时会变色的

时间：2021-05-08

CSS样式为：

复制代码代码如下:
<style type="text/css">
#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none;
margin:0px;
padding:0px;
text-decoration:none;
}
#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
{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover
{
background-color:#990020;
color:#ffff00;
}
</style>
HTML前台代码：

复制代码代码如下:
<body>
<form id="form1" runat="server">
<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>
</form>
</body>
初始效果：
鼠标经过效果：

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章