ThichCode.NET: Tạo Menu DropDown đơn giản bằng CSS ThichCode.NET: Tạo Menu DropDown đơn giản bằng CSS
ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.
Tạo Menu DropDown đơn giản bằng CSS

Tạo Menu DropDown đơn giản bằng CSS

Hiên nay, có rất nhiều cách làm menu, nhưng mình vẫn thích dạng menu DropDown. Và đặt biệt là menu này rất đơn giản, chỉ vài dòng CSS là xon...

Hiên nay, có rất nhiều cách làm menu, nhưng mình vẫn thích dạng menu DropDown. Và đặt biệt là menu này rất đơn giản, chỉ vài dòng CSS là xong. Ưu điểm cửa menu này là không có Javascript nên nhẹ website hơn.
Tạo Menu DropDown đơn giản bằng CSS


Code CSS
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

ul li:hover {
  background: #555;
  color: #fff;
}

ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}

ul li ul li:hover { background: #666; }

ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


Code HTML
<ul><code><code>
<li>Home</li>
<li>About</li>
<li>
    Portfolio
    <ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</code></code></ul>

Demo:

  • Home
  • About
  • Portfolio
    • Web Design
    • Web Development
    • Illustrations
  • Blog
  • Contact
This article helps ?
If this article does not address your issue, leave a comment below

Post a Comment

Most read

Latest