方式一：直接編寫代碼實現
代碼如下：
|
<html> |
|
<head> |
|
<title>無需表格的菜單</title> |
|
<style> |
|
<!-- |
|
body{ |
|
background-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; /* 右側陰影 */ |
|
width:175px; /* xg_超連接以外的部分也觸發CSS樣式效果 */ |
|
} |
|
#navigation li a:link, #navigation li a:visited{ |
|
background-color:#c11136; |
|
color:#FFFFFF; |
|
} |
|
#navigation li a:hover{ /* 鼠標經過時 */ |
|
background-color:#990020; /* 改變背景色 */ |
|
color:#ffff00; /* 改變文字顏色 */ |
|
} |
|
--> |
|
</style> |
|
</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="#">Contact Me</a></li> |
|
</ul> |
|
</div> |
|
</body> |
|
</html> 效果如下： |
