/* 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/AVvXsEhyfWRzlFKwkXJtZkGXRV15gykhkGXzcznDYRrmDgk-qAkTZWzs93wo9GGNJUiSFTSL5ubGbs4jusXMXU5h-xJxCoa-UEKu8-SeIPDMuC8hCQ89l7Hj_Mylp4tP0auySlttEHx_dRoF-Gc/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/AVvXsEi1jLuvmHIOHiN4wZVI-TAY4uXOg0S4YS8VpG_l443WMVoutliaUZpKG9qIqDLnk_giWTSUVM3NyEdRvtEzwFjlQdTlq1Vz0jnTVXcewpMMTnKClIaw6t7edcQwJ2tFdIYma_3XHSR304k/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/AVvXsEjKAmoU5J7RIAP37ft3kLJjYC-oX6Jn6oFdHqDBCpq0lHAkoalnoAok7DYNmmo9BbIvhz0DAyWA_h4am98O64sKHKBIQsBv8BD0iRSQdiQ8U3t5mBgd9W4Pf-skj6dAABvrWhoCMXAScUk/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/AVvXsEg71ebcmuUpt0o-GdPP_BQHDvQkjJ8dmKKKFaOnPtRElqEKhhKheBaCIiR6mzhLG4J9UR4V4PgjDmpJwUIX_lCf3vv0VZV-zZkLCiZSh7tqrzmSRIORuqH-oPOR6xNUQt-rVkh3UDjrjv4/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/AVvXsEh3xRohR5CjeinYNjISEtE8g5mAYNQA_1ZED4PQag24PaDSZPfEJ7ohHb53QdzJgwxyy5uu160-y2x5OhEMNwoxSwYspjI7sQqRoXwArbkZ0FRQw31lqtDVSzsFrtSl2nwGoiu9g1nNVWk/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/AVvXsEh10pddimVxFxBCS83-72REC1NOKyd-e5yR7172G2Jg1gTU46fNVbVs0MAkaacZZB6lNJbo6SyZ8Kk0HzS1Lwme0gKOFpm-tgi0cGIOCreD23j9PKLuZ6gvvLkollXqv5Dy9_DhcL1paHI/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