1. Thiết kế Website bán hàng giá rẻ, chuyên nghiệp, tối ưu. Gọi ngay 0986737485
    Dismiss Notice
  2. Đặt Banner quảng cáo lên diễn đàn chỉ với 199.000đ/Tháng. Gọi ngay 0986737485
    Dismiss Notice
Dismiss Notice
Nhà đăng ký Hosting - Tên miền - Máy chủ VPS chuyên nghiệp. Đăng ký ngay

Code HTML Menu dọc đa cấp đơn giản

Thảo luận trong 'HTML - CSS' bắt đầu bởi huunhan, 05/06/2018.

  1. huunhan

    huunhan Thành viên BQT

    Tham gia:
    11/06/2017
    Bài viết:
    71
    Đã được thích:
    1
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Có lẻ việc làm Menu đa cấp không còn xa lạ với các bạn, hôm nay AD xin chia sẻ 1 Code Menu dọc đa cấp đơn giản, các bạn có thể tham khảo.

    Code CSS:
    Mã:
    .hn-menudoc{margin-bottom: 10px;border-radius: 5px}
    .hn-menudoc ul {background: #1F568B;text-align: left;border-radius: 5px;margin: 0}
    .hn-menudoc li {height: 30px;line-height: 30px;border-bottom: 1px solid #e8e8e8;padding: 0 15px}
    .hn-menudoc li:last-child{border-bottom: 0}
    .hn-menudoc li a {text-decoration: none;color: #FFF;font-weight: bold;display: block;}
    .hn-menudoc li a:before{font-family:'FontAwesome';margin-right:5px;opacity:.7;content:"\f0da"}
    .hn-menudoc li:hover {color:#FFD400;}
    .hn-menudoc li:hover a{color: #FFD400;}
    .hn-menudoc ul li {position: relative;}
    .hn-menudoc .menucon {position: absolute;left: 202px;top: 0;width: 200px;border: 1px solid #e8e8e8;border-radius: 0 5px 5px 0;box-shadow: 0px 2px 3px 0px rgba(0,0,0,.15); -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,.15);z-index: 9;display:none;}
    .hn-menudoc .menucon li a {color: #FFF;}
    .hn-menudoc .menucon li:hover a {color: #FFD400;}
    .hn-menudoc li:hover .menucon {display: block;}
    Code HTML:
    Mã:
    <div class="hn-menudoc">
            <ul>
    <li><a href="#">Menu chinh 1</a></li>
                <li>
                    <a href="#">Menu chinh 2</a>
                    <ul class="menucon">
                        <li><a href="#">Menu con 1</a></li>
    <li><a href="#">Menu con 2</a></li>
                    </ul>
                </li>
    <li><a href="#">Menu chinh 3</a></li>
    <li><a href="#">Menu chinh 4</a></li>
            </ul>
        </div>
     
    Tags:

Chia sẻ trang này

Đang tải...