Dropdown Menu là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều mục để hiển thị hết nội dung của trang.

Hôm nay, mình sẽ giới thiệu với các bạn bài hướng dẫn “Tạo Red Dropdown Menu Ấn Tượng Bằng CSS3”. Hy vọng trang web của bạn có thêm 1 menu tuyệt đẹp.

Sau đây là các bước thực hiện:

1. CODE HTML

<div id='mainmenu'>
    <div class='wrap'>
        <nav id='nav'>
            <ul>
                <li class='mhome'><a href='#'>Home</a></li>
                <li><a href='#'>News</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul class='submenu hidden'>
                        <li><a href='#'>Dropdown 1</a></li>
                        <li><a href='#'>Dropdown 2</a></li>
                        <li><a href='#'>Dropdown 3</a></li>
                        <li><a href='#'>Dropdown 4</a></li>
                    </ul>
                </li>
                <li><a href='#'>Business</a></li>
                <li><a href='#'>Education</a></li>
                <li><a href='#'>Lifestyle</a></li>
                <li><a href='#'>Fashion</a></li>
                <li><a href='#'>Photo</a></li>
                <li><a href='#'>Video</a></li>
            </ul>
        </nav>
        <div class='clear'></div>
    </div>
</div>

2. CODE CSS

*{margin:0;padding:0}

ul, li, li {
  list-style: none;
}

a {
  textdecoration: none;
}

#mainmenu {
  background: #222;
  height: 50px;
  width: 980px;
  margin: 25px auto;
  padding: 0;
  border-bottom: 5px solid #ee1133;
}

#submenu {
  background: transparent;
  margin-bottom: 10px;
}

#nav ul {
  margin: 0;
  padding: 0;
}

#nav li {
  background: url(http://3.bp.blogspot.com/-GUh9UbWqUr4/UlBzMAlrbII/AAAAAAAABCI/dceZOq7l2tk/s1600/menuline.png) no-repeat right top;
  float: left;
  position: relative;
  padding: 0 28px 0 23px;
  margin: 0 0 0 0;
}

#nav li:last-child{
  background: none
}

#nav li a {
  color: #fff;
  display: inline-block;
  padding: 18px 0 18px 0;
  margin: 0 0 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

#nav ul li:hover {
  background-color: #ee1133;
  text-decoration: none;
}

#nav li:last-child a {
}

#nav ul.submenu {
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  position: absolute;
  top: 52px;
  left: 0px;
  width: 180px;
  z-index: 99;
  float: left;
  background: #2D2D2D!important;
  -webkit-box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);
  box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  height: auto;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .5s ease 0;
  -o-transition: all .5s ease 0;
  transition: all .5s ease 0;
  -moz-transition: all .5s ease 0;
  padding: 0;
  border: 3px solid #d900000;
}

#nav ul.submenu li {
  float: none;
  border-bottom: 1px solid #222;
  border-top: 1px solid #383838;
  border-left: 0 none;
  margin: 0;
}

#nav li:hover ul.submenu {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  visibility: visible;
}

#nav ul.submenu li:first-child {
  border-top: 0 none;
}

#nav li.mhome {
  border: 0;
  margin-top: 0;
  background-color: #ee1133;
}

Chúc các bạn thành công!

  • HTML/CSS
  • June 26, 2015
  • 0 comment
  • 108 views

Recent posts

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tuần này, Google AI Overviews bắt đầu triển khai đến hơn 100 quốc gia, bao gồm Việt Nam và hỗ […]

Apple trình làng bộ tính năng AI đầu tiên trên iPhone, iPad và Mac cao cấp

Apple trình làng bộ tính năng AI đầu tiên trên iPhone, iPad và Mac cao cấp

Giám đốc điều hành Apple Tim Cook chia sẻ Apple Intelligence không chỉ đơn thuần là AI tạo sinh, mà […]

Apple phát hành iOS 18.1 đưa Apple Intelligence lên iPhone

Apple phát hành iOS 18.1 đưa Apple Intelligence lên iPhone

Bản cập nhật iOS 18.1 được Apple phát hành ngày 28/10, đưa một số tính năng AI của Apple Intelligence […]

Apple sắp phát hành iOS 18.1

Apple sắp phát hành iOS 18.1

Dự kiến, iOS 18.1 sẽ chính thức được phát hành cho các mẫu iPhone tương thích vào tuần tới. Hiện, […]

Xuất hiện thêm lỗi nghiêm trọng trên iPhone 16

Xuất hiện thêm lỗi nghiêm trọng trên iPhone 16

Một số người dùng vừa nâng cấp lên iPhone 16 phản ánh rằng thiết bị của họ gặp phải tình […]

© 2021 Tạp Chí CNTT. Mr Hoang