Tạp Chí CNTT

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!