[6][A.Thông điệp][slider-top-big][nothing]
You are here: Home / , , , Mẫu Menu Dropdown tuyệt đẹp

Mẫu Menu Dropdown tuyệt đẹp

| 3 Comments
Nhằm cung cấp cho các bạn làm web, blog một mẫu menu drop down đẹp. Erhay xin gửi tới độc giả thường xuyên một mẫu menu nữa. Mẫu menu này bằng CSS khá đơn giản và nhẹ, mọi người có thể tự ý tùy chỉnh.

Mời mọi người xem Demo :





Hướng dẫn cách thêm vào Blogspot :

 Bước 1 : Thêm CSS

Nhấn Ctrl + F để search ]]></b:skin> sau đó đặt CSS trước đó :




a{text-decoration:none; font-size:12px}
.menu{width:900px;height:35px; border-radius:3px; margin:0 auto}
.menu ul{list-style-type:none;height:35px; background:#41C161;}
.menu li {float:left;height:35px; line-height:35px; color:#333}
.menu li:hover{background:#2068D6;color:#333!important}
.menu ul li:hover { color:#333}
.submenu{display:none}
.menu li:hover .submenu li:hover a
{color:white}
.menu li a {color:white; font-weight:bold; text-transform:uppercase}
.menu li:hover .submenu
{
display:block;
position:absolute;
background:#6CC;
height:auto;
z-index:999;
}
.home
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VFBhkyuAyqCw-eB0ygRJLTJpjKaBQlfauuHXI-N6mvGvRCMKbnuwAJp0x9GQHompC4dnzXNbObCb9Jk-ngws8DXUFD9WTXGJGdrmCGK0aKAGG9KYMBnCY2a2pbGXnWBfYB83L1BrP4w/s32/home.png);
background-repeat:no-repeat;
margin-left:-17px;
text-shadow:transparent !important;
margin-top:2px;
}
.home:hover
{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VFBhkyuAyqCw-eB0ygRJLTJpjKaBQlfauuHXI-N6mvGvRCMKbnuwAJp0x9GQHompC4dnzXNbObCb9Jk-ngws8DXUFD9WTXGJGdrmCGK0aKAGG9KYMBnCY2a2pbGXnWBfYB83L1BrP4w/s32/home.png) !important;
border:none !important;
background-repeat:no-repeat !important;
}
.home a
{
color:transparent !important;
text-shadow:none !important;
}
.menu li:hover .submenu li
{
width:200px;
margin-left:-40px;
overflow:hidden;
height:30px;
float:none;
list-style-type:none !important;
color:#333;
}
.menu li:hover .submenu li:hover
{
width:200px;
position:relative !important;
}
body{background:#f7f8f9;}
.menu li a{padding:10px 25px; text-shadow:1px 1px 2px rgba(1,1,1,0.2)}
.menu li a:hover ul li {color:#333}
.menu li a:hover{color:white}

Bước 2 : Đặt menu trong <body>

<div class='menu'>
<ul>
  <li class='home'><a href='#'>Home</a></li>
<li><a href=''>Chuyên mục Erhay</a>
<ul class='submenu'>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
</ul>
</li>
<li><a href=''>Lifestyle</a>
<ul class='submenu'>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
</ul>
</li>
<li><a href=''>Công nghệ</a>
<ul class='submenu'>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
</ul>
</li>
<li><a href=''>Tin tức</a>
<ul class='submenu'>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
</ul>
</li>
<li><a href=''>Giải trí</a>
<ul class='submenu'>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
  <li><a href='#'>Submenu1</a></li>
</ul>
</li>
<li><a href=''>About</a>
<ul class='submenu'>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu1</a></li>
</ul>
</li>
</ul>
</div>

Bước 3 : Save Template

Chú ý : Nếu menu bị lệch bạn search CSS này : img, h1, h2, h3, ul, li, h3 . Xóa hết thuộc tính bên trong đi nhé. 

(Vui lòng ghi lại nguồn Erhay khi phát hành lại thông tin từ trang này)

Related Posts
  • Default comments
  • Facebook comments
Subscribe to: Post Comments ( Atom )