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.

[button color=”blue” size=”medium” link=”http://lyminhhoang.com/demo/html-css/Red-Dropdown-Menu/” ]Demo[/button][button color=”red” size=”medium” link=”http://www.mediafire.com/download/6o3y2dhwrt6a6vr/Red+Dropdown+Menu.rar” ]Download[/button]

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
  • 104 lượt xem

Recent posts

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

TikTok thách thức công cụ tìm kiếm của Google

TikTok thách thức công cụ tìm kiếm của Google

TikTok đã trở thành công cụ tìm kiếm ngày càng phổ biến trong giới trẻ ở Mỹ. Một cuộc khảo […]

© 2021 Tạp Chí CNTT. Mr Hoang