[Code] Menu dọc kiểu đơn giản, rê chuột vào hiện icon

Thực ra thì cũng không có gì mới, mình chỉnh lại cho ... lạ mắt thôi.

Kiểu này phù hợp với việc sử dụng trong trang chủ html, portal hay trong blog.
Xem thử: http://www.trekhuyettat.org/h210-page

Mình đã vận dụng trong blog:(xem bên phải) http://hunghsmn.multiply.com

Code:

<style type='text/css'>
ul.navigation {
list-style:none;
width: 180px;
margin:0;
padding:0;

}

#menu a {
display: block;
padding: 4px 3px 4px 4px;
font-weight:bold;
background-image: url(http://i46.servimg.com/u/f46/14/26/60/46/pale_w10.jpg);

border-top :1px solid #000000;
border-right : 1px solid #000000;
border-bottom : 3px solid #000000;
border-left : 3px solid #9F4F2C;

 -moz-border-radius-bottomright: 17px;
 -khtml-border-radius-bottomright: 17px;
 -webkit-border-bottom-right-radius:17px;

 -moz-border-radius-topleft: 1px;
 -khtml-border-radius-topleft: 1px;
 -webkit-border-top-left-radius:1px;

 -moz-border-radius-bottomleft: 1px;
 -khtml-border-radius-bottomleft: 1px;
 -webkit-border-bottom-left-radius:1px;

 -moz-border-radius-topright: 17px;
 -khtml-border-radius-topright: 17px;
 -webkit-border-top-right-radius:17px;
color: #0000FF;

}

#menu a:link {
text-decoration: none;
}

#menu a:visited {
text-decoration: none;
}

#menu a:hover {
background:#2222FF url('http://i26.servimg.com/u/f26/14/26/60/46/arow10.gif') no-repeat right center;
color: #FFFFFF;
}

#menu a:active {
text-decoration: none;
color: #FF00FF;
}
</style>

<span id="menu">

<ul class="navigation">
<li><a href="http://[url=http://www.trekhuyettat.org"][color=#666666]www.trekhuyettat.org"[/color][/url] class="menu" target="_blank">Trang chủ</a></li>
<li><a href="http://[url=http://www.trekhuyettat.org/forum"][color=#666666]www.trekhuyettat.org/forum"[/color][/url] class="menu" target="_blank">Diễn đàn</a></li>
<li><a href="http://[url=http://www.trekhuyettat.org/html-h70.htm"][color=#666666]www.trekhuyettat.org/html-h70.htm"[/color][/url] class="menu" target="_blank">Luật người KT</a></li>
<li><a href="http://[url=http://www.trekhuyettat.org/html-h61.htm"][color=#666666]www.trekhuyettat.org/html-h61.htm"[/color][/url] class="menu" target="_blank">Trang thơ</a></li>
<li><a href="http://trekhuyettat.blogspot.com/" class="menu" target="_blank">Blosgpost</a></li>
<li><a href="http://hunghsmn.net.ms" class="menu">Web cá nhân</a></li>
<li><a href="http://[url=http://www.code1k.com/2010/05/bo-suu-tap-nhung-icons-nho-tuyet-dep.html"][color=#666666]www.code1k.com/2010/05/bo-suu-tap-nhung-icons-nho-tuyet-dep.html"[/color][/url] class="menu">Bộ stập icon</a></li>
<li><a href="http://[url=http://www.code1k.com/2010/05/hieu-ung-flash-nen-dep-cho-blog-website.html"][color=#666666]www.code1k.com/2010/05/hieu-ung-flash-nen-dep-cho-blog-website.html"[/color][/url] class="menu">BST flash nền</a></li>
</ul>

</span>

Về chuyện các thanh menu thì mình đang sở hữu rất nhiều kiểu, menu ngang, menu dọc từ đơn giản đến đa cấp. cũng đac hia sẻ trên nhiều rồi, các bạn cần thì tìm thêm.