Tạo menu dropdown đơn giản với CSS không cần dùng js
CSS:
.menu
{
list-style-type:none;
}
.menu li
{
float:left;
background:blue;
padding:20px;
}
.menu li a:hover
{
text-decoration:underline;
}
.menu li a
{
color:#fff;
text-decoration:none;
}
/* more menu */
li.moreitem > a
{
background:blue url(more-icon.gif) right center no-repeat;
padding-right:25px;
}
li.moreitem
{
position:relative;
}
.moredropdown div
{
padding:5px 0;
}
.moredropdown
{
display:none;
position: absolute;
background:blue;
padding:5px;
margin-top:20px;
top:35px;
left:0;
width:180px;
}
li.moreitem:hover .moredropdown
{
display:block;
}
{
list-style-type:none;
}
.menu li
{
float:left;
background:blue;
padding:20px;
}
.menu li a:hover
{
text-decoration:underline;
}
.menu li a
{
color:#fff;
text-decoration:none;
}
/* more menu */
li.moreitem > a
{
background:blue url(more-icon.gif) right center no-repeat;
padding-right:25px;
}
li.moreitem
{
position:relative;
}
.moredropdown div
{
padding:5px 0;
}
.moredropdown
{
display:none;
position: absolute;
background:blue;
padding:5px;
margin-top:20px;
top:35px;
left:0;
width:180px;
}
li.moreitem:hover .moredropdown
{
display:block;
}
HTML:
<ul class="menu">
<li><a href="http://giancon.me">Trang chủ</a></li>
<li><a href="http://giancon.me/css">CSS</a></li>
<li><a href="http://giancon.me/qa">hỏi đáp</a></li>
<li class="moreitem">
<a href="http://giancon.me/css">More</a>
<div class="moredropdown">
<div><a href="http://sieuthidiaocsaigon.com">Siêu thị địa ốc Sài Gòn</a></div>
<div><a href="http://nhocconan.com">Đọc truyện online</a></div>
<div><a href="http://www.modules2buy.com">Mạng xã hội</a></div>
<div><a href="http://www.codethietkeweb.com">Share code</a></div>
</div>
</li>
</ul>
<li><a href="http://giancon.me">Trang chủ</a></li>
<li><a href="http://giancon.me/css">CSS</a></li>
<li><a href="http://giancon.me/qa">hỏi đáp</a></li>
<li class="moreitem">
<a href="http://giancon.me/css">More</a>
<div class="moredropdown">
<div><a href="http://sieuthidiaocsaigon.com">Siêu thị địa ốc Sài Gòn</a></div>
<div><a href="http://nhocconan.com">Đọc truyện online</a></div>
<div><a href="http://www.modules2buy.com">Mạng xã hội</a></div>
<div><a href="http://www.codethietkeweb.com">Share code</a></div>
</div>
</li>
</ul>



.jpg)

{
list-style-type:none;
width:150px;
}
.menu li
{
background:blue;
padding:20px;
font-weight:bold;
border-top:1px solid #000;
}
.menu li a:hover
{
text-decoration:underline;
}
.menu li a
{
color:#fff;
text-decoration:none;
}
/* more menu */
li.moreitem > a
{
background:url(https://sites.google.com/site/testcodesite2011/home/luu-tru/more-icon.gif) right center no-repeat;
padding-right:25px;
}
li.moreitem
{
position:relative;
}
.moredropdown div
{
padding:5px 0;
}
.moredropdown
{
display:none;
position:absolute;
background:green;
padding:5px;
left:150px;
width:180px;
top:20px;
}
li.moreitem:hover .moredropdown
{
display:block;
}
Tương tự menu ngang thôi bạn, mình nghỉ nếu bạn hiểu được cách viết cho menu ngang thì bạn sẽ ứng dụng được cho menu dọc.
- Chổ khác nhau chỉ là: li không cần float:left. Submenu: bỏ top & left thay đổi thông số 1 chút.
Đây là menu ngang vậy còn menu dọc thì làm như thế nào ah?