Thủ thuật tạo Menu ngang cho Blogger bằng CSS < 2 >
Đơn giản.<style>
/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}
ul#navlist li {
float: left;
width: 60px;
height:24px;
}
ul#navlist li a {
text-decoration: none;
width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;
line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #003663;
display:block;
color:#fff;
}
ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}
</style>
<ul id="navlist">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
Lưu ý :
+ width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột
+ width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường
+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.
+ background: #003663; : màu nền của menu lúc bình thường
+ background:#004a80; : màu nền của menu khi rê chuột vào
0 nhận xét:
Đăng nhận xét