Home » » Bài đăng đang xem:

Tạo menu dropdown_2columns tuyệt đẹp - thủ thuật bản quyền


Bước 1 : chèn code CSS sau  trên dòng     ]]></b:skin>




<!-- Code menu begin --> 


/* MENU */
#menu-width{width:960px;margin:0 auto;height:45px;background:none}
/* Menu top */
.menu-top{clear:both;height:43px;position:relative;top:9px;width:460px}
.menu-top ul{list-style:none;margin:0;padding:0}
.menu-top ul li,.menu ul li.last,.menu ul li:hover.last{display:inline-block;float:left;font-size:14px;height:28px}
.menu-top ul li a{border-right:1px solid #2f2f2f;color:#ccc;display:inline-block;font:aria;font-size:12px;font-weight:nomal;height:23px;outline:none;text-decoration:none;width:auto;padding:5px 15px 9px}
.menu-top ul li a:hover{color:#56A5EC}
.menu-top ul li ul{background:#000;border:1px solid #2f2f2f;display:none;margin-left:-1px;margin-top:4px;position:absolute;z-index:1;font-size:11px}
.menu-top ul li ul li{background:#000;height:auto;overflow:hidden;width:100%;margin:0;padding:0}
.menu-top ul li ul li a{background-color:none;background-position:5px 5px!important;background-repeat:no-repeat;border-bottom:1px solid #333;color:#ccc;display:block;font-size:14px;height:auto;outline:none;width:100%;padding:11px 15px 10px!important}
.menu-top ul li ul li a:hover{background-color:#000;color:#56A5EC}
.menu-top ul li{margin:0}
.menu_down ul li ul li ul{margin-top:0;z-index:10}
.menu_navi a{border-bottom:1px solid #ccc;display:block;text-decoration:none;padding:8px 0}
.menu_navi ul li{margin:0;padding:0}
.menu_navi ul li ul{margin-top:0;padding-top:0}
.menu_navi ul.cs li a{border:0}
ul.cs li{height:20px;padding-left:30px}
ul.cs{background:#000;border-bottom:1px solid #ccc;margin-top:0;padding-bottom:10px;padding-top:0;position:relative;top:0}
.menu-top ul li.home1{background:transparent}
.menu-top ul li:hover,.menu ul li.hover,.menu ul li.home,.menu ul li.home1:hover{background:none;color:#56A5EC}
.menu-top ul.cs,.menu_navi ul li.product,.menu_navi ul li.support,.menu_navi ul li.education,.menu_navi ul li.partners,.menu_navi ul li.last,.menu_navi ul li.home,.menu_navi ul li.blog,.menu_navi li.navi-side
.menu_navi li.navi.home1{display:none}
.menu_navi-on,.menu_navi .menu_navi-on{color:#f70;font-weight:700}
.menu_navi ul li.home,.menu_navi ul li.home1{display:block}
/* Menu top right */
.topMenuRight{position:absolute;right:0;top:4px;width:500px}
.topMenuRight ul li{float:left}
.topMenuRight ul li a{display:block;color:#ccc;text-decoration:none;height:42px;line-height:42px;font-size:11px;background:url(http://4.bp.blogspot.com/-SxR-mls27k8/Tn21YZHPD-I/AAAAAAAACYI/oegJIx1gcEw/s1600/tich.png) 1px 50% no-repeat;padding:0 15px}
.topMenuRight ul li a:hover{color:#fff}
/* Menu */
#menu h2{display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0}
:focus{outline:0}
.menu ul,.menu li{font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:21px;text-align:left}
.menu h3{color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:13px;line-height:21px;text-shadow:1px 1px 1px #000;margin:5px 0}
.menu{list-style:none;width:auto;height:40px;margin:-57px auto 0;padding:0 20px 0 10px}
.menu li{font-weight:700;float:left;text-align:center;position:relative;margin-right:5px;margin-top:5px;border:none;padding:4px 10px}
.menu li:hover{z-index:2;background:#ff8816;border:1px solid #eee;padding:4px 9px}
.menu li a{color:#444;outline:0;text-decoration:none;display:block;text-shadow:1px 1px 1px #fff}
.menu li:hover a{color:#111;text-shadow:none;outline:0}
.menu li:hover div a:hover{color:#111}
.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns{position:absolute;background:#ff8816 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu808yXjMdquvvsTicTSQIflorMFjcQobemhYfoyAQXq-JIJqqHxq0K_GBVxkfGVAPaQPUmiFfVl92_uoBkcmCBY3oxVNZa5oe1W8vV4PQ2wIkiKlBnnhHZj17qQtB8_tOQ8H3zFc08PMy/s1600/ng.bmp) no-repeat bottom right;border:1px solid #eee;border-top:none;left:-999em;text-align:left;margin:4px 4px 4px 0;padding:5px}
.dropdown_column_right{position:absolute;background:#ff8816;border:1px solid #eee;border-top:none;left:-999em;text-align:left;width:450px;margin:4px 4px 4px -355px;padding:5px}
.dropdown_1column{width:150px}
.dropdown_2columns{width:300px}
.dropdown_3columns{width:450px}
.dropdown_4columns{width:600px}
.col_1,.col_2,col_3,col_4{display:inline;float:left;position:relative;margin-left:5px;margin-right:5px}
.right{display:inline;float:left;position:relative;margin-left:5px;margin-right:5px;width:140px}
.col_1{width:140px}
.col_2{width:290px}
.col_3{width:440px}
.col_4{width:590px}
.menu li ul{list-style:none;margin:0 0 12px;padding:0}
.menu li ul li{font-size:12px;line-height:24px;position:relative;float:none;text-align:left;width:140px;margin:0;padding:0}
.menu li ul li:hover{background:none;border:none;margin:0;padding:0}
.menu li:hover div a,.menu li ul li a:hover{color:#fff}
.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns,.menu li:hover .dropdown_3columns,.menu li:hover .dropdown_4columns,.menu li:hover .dropdown_column_right{left:-1px;top:auto}


<!-- End -->



Bước 2 : Chèn Code sau vào vị trí muốn hiển thị 


<!-- Code menu begin --> 
<ul class='menu'> 
<li><a class='drop' href='http://templates.nsvina.com/'>GIỚI THIỆU</a> 
<div class='dropdown_2columns'> 
<div class='col_1'> 
<h3>ABOUT</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>THÔNG TIN</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
</div></li> 
<li><a class='drop' href='#'>SẢN PHẨM</a> 
<div class='dropdown_4columns'> 
<div class='col_1'> 
<h3>SIM ĐA NĂNG</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>SIM SỐ ĐẸP</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>CATALOG VSIM</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>MẪU TEMPLATE</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li>  
</ul> 
</div> 
</div></li> 
<li><a class='drop' href='#'>CHÍNH SÁCH</a> 
<div class='dropdown_4columns'> 
<div class='col_1'> 
<h3>THÔNG TIN</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>KINH DOANH</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>SIM ĐA NĂNG</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>HỖ TRỢ CỦA LDV</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
</div></li> 
<li><a class='drop' href='#'>KIẾN THỨC</a> 
<div class='dropdown_2columns'> 
<div class='col_1'> 
<h3>KINH DOANH</h3> 
<ul> 
<li><a href='#'>Video</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
<div class='col_1'> 
<h3>PHÁT TRIỂN</h3> 
<ul> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul> 
</div> 
</div></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
<li><a href='http://templates.nsvina.com/'>Chờ cập nhật</a></li> 
</ul>
<!-- End --> 
Tags:
=>Mời bạn chia sẽ đóng góp ý kiến cho bài viết
Đăng ký nhận bài miễn phí

Các bài đăng liên quan--------------Bài đăng chủ đề khác

Flicker Images


    Giới thiệu : Mời bạn đăng ký dịch vụ để download style templates đây là một sản phẩm được thiết kế bản quyền do trung tâm Vcupdesign kết hợp với giải pháp mạng Việt Nam -nsvina.com thực hiện   
    Tính chất dịch vụ : Chúng tôi sưu tầm các templates chất lượng trên mạng Internet và Download về fix lại tất cả các lỗi, code rác, virus nhằm cung cấp cho quý khách một templates chất lượng cao với phong cách hoàn toàn khác biệt nổi trội. 
    Cam kết sử dụng : Với tính chất như đã trình bày bên trên cho nên chúng tôi cam kết chỉ thu tiền của quý khách khi hoàn chỉnh bàn giao templates như trong hợp đồng. 
    Cho bạn niềm tin : Với đội ngũ Design chuyên nghiệp 6 năm kinh nghiệm và tầm nhìn thẩm mỹ...chúng tôi hứa hẹn mang lại cho quý khách một sản phẩm tốt nhất và ưng ý! 
    Quy định chung cần biết :
  1. Chúng tôi chỉ cung cấp mã nguồn 1 lần duy nhất.
  2. Chúng tôi không bảo hành khi quý khách làm trái quy định bảo lưu templates.
  3. Chúng tôi không hoàn tiền khi quý khách hàng đổi ý chọn giao diện khác.
  4. Chúng tôi chỉ có 1 địa chỉ duy nhất cho nên chúng tôi không chấp nhận việc khiếu nại không đúng bản quyền.
Copyright nsvina.com - Ghi rõ nguồn templates.nsvina.com - Khi phát hành lại bài viết trên trang này
Maxivn | VIỆC LÀM | Thiết kế web rẻ | Thiết kế blogspot