pacman, rainbows, and roller s

ChiaSeIT.Mobie.In

Share CSS Menu Drop Responsiver Cực Đẹp

Chả là sáng nay mình mướn thiết kế cái drop để đưa vào template smatphone nhưng do không hợp với wap minh nên mình tách ra share
hi vọng rằng nó sẽ có ích cho nhiều bạn muốn học CSS
Copy và chèn code này vào style Wap bạn

#dropmenu_md ul,
#dropmenu_md li,
#dropmenu_md span,
#dropmenu_md a {
margin : 0;
padding : 0;
position : relative;
}
#dropmenu_md {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background : #141414;
background : -moz-linear-gradient(top, #333333 0%, #141414 100%);
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background : -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background : -o-linear-gradient(top, #333333 0%, #141414 100%);
background : -ms-linear-gradient(top, #333333 0%, #141414 100%);
background : linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
width : auto;
}
#dropmenu_md:after,
#dropmenu_md ul:after {
content : '';
display : block;
clear : both;
}
#dropmenu_md a {
background : #141414;
background : -moz-linear-gradient(top, #333333 0%, #141414 100%);
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background : -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background : -o-linear-gradient(top, #333333 0%, #141414 100%);
background : -ms-linear-gradient(top, #333333 0%, #141414 100%);
background : linear-gradient(to bottom, #333333 0%, #141414 100%);
color : #ffffff;
display : block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding : 19px 20px;
text-decoration: none;
}
#dropmenu_md ul {
list-style: none;
}
#dropmenu_md > ul > li {
display : inline-block;
float : left;
margin : 0;
}
#dropmenu_md.align-center {
text-align: center;
}
#dropmenu_md.align-center > ul > li {
float : none;
}
#dropmenu_md.align-center ul ul {
text-align: left;
}
#dropmenu_md.align-right > ul {
float : right;
}
#dropmenu_md.align-right ul ul {
text-align: right;
}
#dropmenu_md > ul > li > a {
color : #ffffff;
font-size: 12px;
}
#dropmenu_md > ul > li:hover:after {
content : '';
display : block;
width : 0;
height : 0;
position : absolute;
left : 50%;
bottom : 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#dropmenu_md > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#dropmenu_md.align-right > ul > li:first-child > a,
#dropmenu_md.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#dropmenu_md.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#dropmenu_md > ul > li.active > a,
#dropmenu_md > ul > li:hover > a {
color : #ffffff;
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background : #070707;
background : -moz-linear-gradient(top, #262626 0%, #070707 100%);
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background : -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background : -o-linear-gradient(top, #262626 0%, #070707 100%);
background : -ms-linear-gradient(top, #262626 0%, #070707 100%);
background : linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#dropmenu_md .has-sub {
z-index: 1;
}
#dropmenu_md .has-sub:hover > ul {
display : block;
}
#dropmenu_md .has-sub ul {
display : none;
position : absolute;
width : 200px;
top : 100%;
left : 0;
}
#dropmenu_md.align-right .has-sub ul {
left : auto;
right : 0;
}
#dropmenu_md .has-sub ul li {
*margin-bottom: -1px;
}
#dropmenu_md .has-sub ul li a {
background : #0fa1e0;
border -bottom: 1px dotted #31b7f1;
font-size: 11px;
filter : none;
display : block;
line-height: 120%;
padding : 10px;
color : #ffffff;
}
#dropmenu_md .has-sub ul li:hover a {
background : #0c7fb0;
}
#dropmenu_md ul ul li:hover > a {
color : #ffffff;
}
#dropmenu_md .has-sub .has-sub:hover > ul {
display : block;
}
#dropmenu_md .has-sub .has-sub ul {
display : none;
position : absolute;
left : 100%;
top : 0;
}
#dropmenu_md.align-right .has-sub .has-sub ul,
#dropmenu_md.align-right ul ul ul {
left : auto;
right : 100%;
}
#dropmenu_md .has-sub .has-sub ul li a {
background : #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#dropmenu_md .has-sub .has-sub ul li a:hover {
background : #0a6d98;
}
#dropmenu_md ul ul li.last > a,
#dropmenu_md ul ul li:last-child > a,
#dropmenu_md ul ul ul li.last > a,
#dropmenu_mdul ul ul li:last-child > a,
#dropmenu_md .has-sub ul li:last-child > a,
#dropmenu_md .has-sub ul li.last > a {
border-bottom: 0;
}


Tiếp đến là sử dụng các class HTML sau để hiển thị nhé

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>menu1</span></a>
<ul>
<li class='has-sub'><a href='#'><span>menu1 1</span></a>
<ul>
<li><a href='#'><span>Sub menut</span></a></li>
<li class='last'><a href='#'><span>Sub menu</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>menu 2</span></a>
<ul>
<li><a href='#'><span>Sub menu</span></a></li>
<li class='last'><a href='#'><span>Sub menu</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Trợ Giúp</span></a></li>
<li class='last'><a href='#'><span>Hỏi Đáp</span></a></li>
</ul>
</div>


Nguồn: VietCMS

Bình luận
Từ Khóa
Share CSS Menu Drop Responsiver Cực Đẹp , Chả, là, sáng, nay, mình, mướn, thiết, kế, cái, drop, để, đưa, vào, template, sm , Tìm hiểu Share CSS Menu Drop Responsiver Cực Đẹp làm theo và học hỏi , Bài viết Hot Share CSS Menu Drop Responsiver Cực Đẹp ,
Cùng Chuyên Mục
Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3
Tạo Login Form giống WordPress Admin với CSS3 và jQuery
Tạo modal window với HTML5 và CSS3
Thiết kế mẫu đồng hồ đếm ngược cực ấn tượng với CSS3
Tạo Tooltip bằng CSS3
Tạo hiệu ứng cầu vòng tuyệt đẹp cho văn bản bằng CSS3
Hướng dẫn làm Form Login style Facebook đẹp
Share Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo
CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web
Làm thẻ Tiêu đề tự đổi màu với CSS
Chia sẻ coding miễn phí © 2017
Thiết kế: Mạnh Tuân

1.4% sitemap.xml robots.txt U-ONC-STAT