» » Code CSS Drop menu đơn giản nhất

Code CSS Drop menu đơn giản nhất

Có rất nhiều menu CSS trực tuyến miễn phí mà bạn có thể sử dụng để xây dựng vào Website của bạn. Một trong số họ yêu cầu JavaScript và một số thì không. Bài viết này sẽ cho bạn thấy làm thế nào thêm một trình đơn để trang web của bạn chỉ với CSS. Điều này cho phép bạn tạo ra một trình đơn thả mà không cần có kinh nghiệm JavaScript.
http://cdn.inmotionhosting.com/support/images/stories/edu/website-design/203/simple-css-drop-menu/simple-css-menu.png
Code CSS Drop menu đơn giản nhất

Code CSS cho Drop menu

Đoạn code dưới đây cần được chèn vào thẻ <head> trang web của bạn hoặc cũng có thể chèn vào stylesheet css ngoại

 
<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>

Code HTML cho Drop menu

Các mã dưới đây là mã HTML cho trình đơn chính nó. Menu là trong danh sách các thẻ HTML và được thả nổi để cung cấp cho các inline được nhìn thấy. Bạn có thể dán mã bất cứ nơi nào mà bạn thích (thường ở phía trên cùng của trang của bạn) trong thẻ <body> của trang web của bạn.
<ul id="drop-nav">
  <li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">Content Management</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>
</ul>

 Bây giờ bạn có thể tùy chỉnh trình đơn và làm cho Drop menu là của riêng bạn! Trong hướng dẫn tiếp theo, tìm hiểu làm thế nào để Align và nổi hình ảnh với CSS.
Đi lên