Tạo dropdown menu đơn giản với CSS và HTML

Nội dung file html. Nếu bỏ vào file html của các bạn thì copy nội dung của <div class="main_menu">

<!DOCTYPE html>
<html>
<head>
<title>Tạo menu bằng html và css</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="wrapper">
<div class="main_menu">
<ul>
<li><a href="">Trang chủ</a></li>
<li><a href="">Giới thiệu</a></li>
<li><a href="">Sản phẩm</a>
<ul>
<li><a href="">Menu con 1</a></li>
<li><a href="">Menu con 2</a></li>
<li><a href="">Menu con 3</a></li>
<li><a href="">Menu con 4</a></li>
<li><a href="">Menu con 5</a></li>
</ul>
</li>
<li><a href="">Tin tức</a></li>
<li><a href="">Giỏ hàng</a></li>
<li><a href="">Liên hệ</a></li>
<li><a href="">Tin tức</a></li>
<li><a href="">Giỏ hàng</a></li>
<li><a href="">Liên hệ</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Nhấn để mở rộng...

Nội dung file css
* { margin: 0px; padding: 0px;}
Nhấn để mở rộng...
li{ list-style: none;}
a{text-decoration: none;color: #FFF;font-size: 16px;}
.clear{ clear: both;}
.wrapper{ width: 960px; height: 500px; background: #F8F8F8; margin: 0px auto; }
.main_menu{ background: #00A69B; margin-top: 30px;}
.main_menu>ul>li{ float: left;padding: 11px 27px; position: relative; border-right: 1px dotted #ACACAC;}
.main_menu>ul>li:last-child{ border-right: none;}
.main_menu>ul>li>ul{ display: none; position: absolute; background: #00A69B;top: 41px;width: 198px; left: 0px;}
.main_menu>ul>li:hover ul{ display: block;}
.main_menu ul li:hover{ background: #5F5C5C; transition: all 0.25s;}
.main_menu>ul>li>ul>li{ padding: 5px 10px;}
.main_menu>ul>li>ul>li{ border-bottom: 1pxdotted#ACACAC;}
Nhấn để mở rộng...

 
  • Chủ đề
    dropdown menu menu
    • G

    Giomuadongbac

    Dùng jquery thì đẹp nhưng nặng hơn. Nói chung thích đơn giản và nhẹ thì dùng css là tốt rồi
     
    VSupport

    VSupport

    Ngây thơ trong tối
    giờ đa số dùng jQuery rồi, nói chung cũng không nặng lắm đâu :troll:
     
    G

    Giomuadongbac

    Bác nói thế thì em cũng chịu thua. :D . Mà em không nhầm thì vfo.vn cũng sử dụng hiệu ứng css cho menu trên thôi kìa.
     
    Đăng nhập bằng tài khoản VFO hoặc Google

    Bài viết mới nhất

    Bài viết đang hot

    Thống kê

    Chủ đề
    100,772
    Bài viết
    467,615
    Thành viên
    339,861
    Thành viên mới nhất
    Trái cây sấy Việt Nam

    Bài viết được quan tâm nhiều

    Top