CSS实现菜单栏制作，鼠标经过变色

最新推荐文章于 2024-05-28 15:36:43 发布

onlinewk

最新推荐文章于 2024-05-28 15:36:43 发布

阅读量2.7k

点赞数 1

分类专栏： HTML/jQuery/JS/CSS

本文链接：https://blog.youkuaiyun.com/wwk0125/article/details/23298755

版权

HTML/jQuery/JS/CSS 专栏收录该内容

7 篇文章

订阅专栏

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;  /* 添加标签<li>的下划线*/
     		}
     		
     	#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>

初始效果：

鼠标经过效果：