/* The CSS Code for the menu starts here bloggertrix.com */
.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 687px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB;
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvEUzHSZyZEU0AP8tYhzoCmSChLVMEq31ercJ8xQzM-tSt23Bi-SV9vE-xBgHCAcdM0Q_UpKzq2r940MpGvFfhPMcjIuH5ibEFlP6u35ANU15yHlR55uYMJ6n2l7kmHHNdE0VbsetJY5E/s1600/bt_home.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0bsWZOkocVCrxZ9cPLFO3v6zGF1JCt4wqLhYvn5ivIMk6M00gvBqZnKtwKRfYbdCJvy25t9c2o0cIsUmrV7dOfVukTBnqE_gW9bdBb1XLsu43Ci_tr5YNKfAZ52BZ-tPsfNWjVV7MyM/s1600/bt_bulb.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj90z4xLtHDL_rqF7XOBphdOm_ZbznvPyI25eFTDYe8QLfY3LtcJSGNU0iuQx8fI1PPymcLdZ7NK5CsgLsAODU8AgIdcY1Pyb6NtvZ-OlU5ULBxgcs5IkqGgQKn3lCb1LNFcKcMYKyHF0k/s1600/bt_database_add.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-UnzhyphenhyphenU8PpKLck_drvRJNwxggp5EF7v37o8YHKlDsGIQfyGEUarHeV215wSlIvQdtuqRm-CFU9jNfGvi0SQeoaYFM83zChuGDQrLxKpJM4-8Ad8VGgQlRyjUz9wrWWFCmW0XP6lmfhM/s1600/bt_films.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFYd4FnvqXxdkk86pMF2OWiQbjhv266uAlph4uKDWTDj1ItV7B349iDYIwNXd7-xAY6cLSDe-m49PeuHzuBoX2SAkF-N3_gIuE1rB8250z12StJuRcTzEWsQHPuGOygZ5YyV9tJQ3b_s/s1600/bt_mobile-phone.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(6) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhozWQigAlpsrAW0ktoe6rhgXwG6Ga8yrnvYEqLqefO4-Oe7WyyKJf1oHz8qZ8-U17U_ynPMEK2vtX2gu92z0fLw-6H3bv7bSlQtjnASTAO6ozXRjeg5fBtd5AELdlpFbRXreifaaFosnQ/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat;
}
.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}
<div class="shadowblockmenu">
<ul>
<li><a href="#">Home page</a></li>
<li><a href="#">Thư viện CSS</a></li>
<li><a href="#">Dữ liệu</a></li>
<li><a href="#">Phim hay</a></li>
<li><a href="#">Ứng dụng Mobile</a></li>
<li><a href="
http://mientaywap.blogspot.com/
</ul>
</div>
Chúc các bạn thành công!!!
Comments[ 0 ]
Đăng nhận xét