純CSS制作菜單欄當鼠標經(jīng)過時會變色的
發(fā)布時間：2014-04-14 15:24:05 作者：佚名 
我要評論
我要評論這篇文章主要介紹了使用CSS實現(xiàn)菜單欄的制作當鼠標經(jīng)過時有變色效果，個人感覺還是個不錯的例子，希望對初學者有所幫助
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; /* 區(qū)塊顯示*/
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 /* 超鏈接正常狀態(tài)、被訪問過的狀態(tài)*/
{
background-color:#c11136; /* 設置背景色*/
color:#FFFFFF; /* 設置文字顏色*/
}
#navigation li a:hover /*鼠標經(jīng)過時*/
{
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>
初始效果：
鼠標經(jīng)過效果：
復制代碼
代碼如下:<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; /* 區(qū)塊顯示*/
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 /* 超鏈接正常狀態(tài)、被訪問過的狀態(tài)*/
{
background-color:#c11136; /* 設置背景色*/
color:#FFFFFF; /* 設置文字顏色*/
}
#navigation li a:hover /*鼠標經(jīng)過時*/
{
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>
初始效果：
鼠標經(jīng)過效果：
相關文章
如何通過 display:olck/none 完成一個菜單欄
這篇文章主要介紹了如何通過 display:olck/none 完成一個菜單欄,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-18
使用layui實現(xiàn)左側菜單欄及動態(tài)操作tab項的方法
這篇文章主要介紹了使用layui實現(xiàn)左側菜單欄及動態(tài)操作tab項的方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參2020-11-10
Html+Css+Jquery實現(xiàn)左側滑動拉伸導航菜單欄的示例代碼
這篇文章主要介紹了Html+Css+Jquery實現(xiàn)左側滑動拉伸導航菜單欄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們2020-03-17
使用HTML+CSS實現(xiàn)鼠標劃過的二級菜單欄的示例
本篇文章主要介紹了使用HTML+CSS實現(xiàn)鼠標劃過的二級菜單欄的示例，非常具有實用價值，需要的朋友可以參考下2017-09-14
詳解css3 Transition屬性（平滑過渡菜單欄案例）
這篇文章主要介紹了詳解css3 Transition屬性（平滑過渡菜單欄案例）的相關資料,需要的朋友可以參考下2017-09-05- 本文主要介紹了菜單欄 “三” 變形為“X”css3過渡動畫的實現(xiàn)方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-28
- 這篇文章主要介紹了利用CSS實現(xiàn)的幾款不錯的菜單欄實例代碼，文中包含滑動菜單、左側帶圖標多級下拉菜單、立體動感菜單、可同時折疊的手風琴菜單、鼠標滑動展開二級菜單以2017-02-16
CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法的相關資料,需要的朋友可以參考下2016-08-15
利用html+css實現(xiàn)菜單欄緩慢下拉效果的示例代碼
這篇文章主要介紹了利用html+css實現(xiàn)菜單欄緩慢下拉效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2021-03-22
