Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Lỗi tạo Menu trong CSS

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi nguoidubi3416, 9/11/13.

Lượt xem: 2,324

  1. nguoidubi3416 Mới đăng kí

    Chào các bạn mình là newbie, mình có một vấn đề về CSS khi thiết kế Menu như sau:
    Mình tạo file HTML như sau:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <link rel="stylesheet" type="text/css" href="Css/StyleMenu.css" />
    </head>
    <body>
    <div id="Dropdown">
    <ul>
    <li><a href="#">VĂN HỌC VIỆT NAM</a>
    <ul>
    <li><a href="#">Truyện ngắn</a></li>
    <li><a href="#">Tiểu thuyết</a></li>
    <li><a href="#">Phóng sự - Ký sự</a></li>
    <li><a href="#">Thơ</a></li>
    <li><a href="#">Truyện lịch sử</a></li>
    <li><a href="#">Truyện trinh thám viễn tưởng</a></li>
    <li><a href="#">Nghiên cứu / Phê bình</a></li>
    <li><a href="#">Nhân vật / Hồi ký</a></li>
    <li><a href="#">Truyện tuổi teen</a></li>
    </ul>
    </li>
    <li><a href="#">VĂN HỌC NƯỚC NGOÀI</a>
    <ul>
    <li><a href="#">Truyện viễn tưởng</a></li>
    <li><a href="#">Truyện kinh dị</a></li>
    <li><a href="#">Tác phẩm kinh điển</a></li>
    <li><a href="#">Truyện kiếm hiệp</a></li>
    <li><a href="#">Truyện trinh thám</a></li>
    <li><a href="#">Tiểu thuyết</a></li>
    </ul>
    </li>
    <li><a href="#">KHOA HỌC KỸ THUẬT</a>
    <ul>
    <li><a href="#">Khoa học phổ thông</a></li>
    <li><a href="#">Cơ khí / Chế tạo máy</a></li>
    <li><a href="#">Môi trường / Môi sinh</a></li>
    <li><a href="#">Điện / Điện tử / Tự động hóa</a></li>
    <li><a href="#">Da giày / Dệt may</a></li>
    <li><a href="#">Hóa chất / Dầu khí / Khoáng sản</a></li>
    <li><a href="#">Kỹ thuật công nghệ / Viễn thông</a></li>
    <li><a href="#">Xây dựng / Kiến trúc</a></li>
    </ul>
    </li>
    <li><a href="#">KINH TẾ TÀI CHÍNH</a>
    <ul>
    <li><a href="#">Bí quyết làm giàu</a></li>
    <li><a href="#">Sách Marketing</a></li>
    <li><a href="#">Tài chính & Tiền tệ</a></li>
    <li><a href="#">Kinh tế học</a></li>
    <li><a href="#">Phân tích thị trường</a></li>
    <li><a href="#">Ngoại thương</a></li>
    <li><a href="#">Chứng khoáng và đầu tư</a></li>
    <li><a href="#">Quản trị kinh doanh</a></li>
    <li><a href="#">Bài học kinh doanh</a></li>
    <li><a href="#">Kế toán</a></li>
    <li><a href="#">Luật và quy định</a></li>
    <li><a href="#">Nhân sự / Việc làm</a></li>
    <li><a href="#">Nhân vật & Bài học kinh doanh</a></li>
    </ul>
    </li>
    <li><a href="#">VĂN HÓA XÃ HỘI</a>
    <ul>
    <li><a href="#">Doanh nhân văn hóa</a></li>
    <li><a href="#">Sách tôn giáo</a></li>
    <li><a href="#">Văn hóa Việt Nam</a></li>
    <li><a href="#">Văn hóa Thế giới</a></li>
    <li><a href="#">Du lịch Việt Nam</a></li>
    <li><a href="#">Du lịch thế giới</a></li>
    <li><a href="#">Văn hóa nghệ thuật</a></li>
    <li><a href="#">Sách ảnh</a></li>
    <li><a href="#">Chính trị</a></li>
    <li><a href="#">Xã hội</a></li>
    <li><a href="#">Triết học</a></li>
    </ul>
    </li>
    <li><a href="#">SÁCH TIN HỌC</a>
    <ul>
    <li><a href="#">Tin học căn bản</a></li>
    <li><a href="#">Tin học văn phòng</a></li>
    <li><a href="#">Lập trình</a></li>
    <li><a href="#">Internet / Mạng / Web</a></li>
    <li><a href="#">Cơ sở dữ liệu</a></li>
    <li><a href="#">Đồ họa</a></li>
    <li><a href="#">Phần cứng</a></li>
    <li><a href="#">Hệ điều hành</a></li>
    </ul>
    </li>
    <li><a href="#">HỌC LÀM NGƯỜI</a></li>
    <li><a href="#">GIA ĐÌNH, NUÔI DẠY CON</a>
    <ul>
    <li><a href="#">Nữ công gia chánh</a></li>
    <li><a href="#">Nuôi dạy con</a></li>
    <li><a href="#">Sách nấu ăn</a></li>
    <li><a href="#">Hạnh phúc gia đình</a></li>
    </ul>
    </li>
    <li><a href="#">SÁCH THAM KHẢO</a>
    <ul>
    <li><a href="#">Sách tiểu học</a></li>
    <li><a href="#">Sách trung học cơ sở</a></li>
    <li><a href="#">Trung học Phổ thông</a></li>
    <li><a href="#">Sách Luyện thi đại học</a></li>
    <li><a href="#">Giáo trình CĐ / ĐH</a></li>
    </ul>
    </li>
    <li><a href="#">SÁCH NGOẠI NGỮ</a>
    <ul>
    <li><a href="#">Sách tiếng Anh</a></li>
    <li><a href="#">Sách tiếng Pháp</a></li>
    <li><a href="#">Sách khác</a></li>
    <li><a href="#">Sách tiếng Nga</a></li>
    <li><a href="#">Sách tiếng Đức</a></li>
    <li><a href="#">Sách tiếng Nhật</a></li>
    <li><a href="#">Sách tiếng Hàn</a></li>
    <li><a href="#">Sách tiếng Hoa</a></li>
    <li><a href="#">Giáo trình tiếng Anh</a></li>
    <li><a href="#">Ngữ pháp tiếng Anh</a></li>
    <li><a href="#">Tiếng Anh chuyên ngành</a></li>
    </ul>
    </li>
    <li><a href="#">NÔNG LÂM NGHIỆP</a>
    <ul>
    <li><a href="#">Trồng trọt</a></li>
    <li><a href="#">Chăn nuôi</a></li>
    <li><a href="#">Cây cảnh</a></li>
    </ul>
    </li>
    <li><a href="#">TỪ ĐIỂN</a>
    <ul>
    <li><a href="#">Từ điển tiếng Việt</a></li>
    <li><a href="#">Từ điển tiếng Anh</a></li>
    <li><a href="#">Từ điển tiếng Hoa</a></li>
    <li><a href="#">Từ điển tiếng Pháp</a></li>
    <li><a href="#">Từ điển tiếng Nhật</a></li>
    <li><a href="#">Từ điển chuyên ngành</a></li>
    <li><a href="#">Từ điển khác</a></li>
    </ul>
    </li>
    <li><a href="#">TRUYỆN TRANH</a></li>
    <li><a href="#">KIẾN TRÚC MỸ THUẬT</a>
    <ul>
    <li><a href="#">Trang trí nội thất</a></li>
    <li><a href="#">Kiến trúc / Xây dựng</a></li>
    <li><a href="#">Phong thủy nhà ở</a></li>
    <li><a href="#">Nhiếp ảnh / Điêu khắc / Hội họa</a></li>
    </ul>
    </li>
    <li><a href="#">PHÁP LUẬT, THUẾ</a>
    <ul>
    <li><a href="#">Luật dân sự</a></li>
    <li><a href="#">Luật hình sự</a></li>
    <li><a href="#">Luật lao động</a></li>
    <li><a href="#">Thuế</a></li>
    <li><a href="#">Luật thương mại</a></li>
    <li><a href="#">Luật quốc tế</a></li>
    <li><a href="#">Luật đất đai</a></li>
    <li><a href="#">Sách khác</a></li>
    </ul>
    </li>
    <li><a href="#">KHOA HỌC ĐỜI SỐNG</a>
    <ul>
    <li><a href="#">Giáo dục tâm lý</a></li>
    <li><a href="#">Sách phong thủy tâm linh</a></li>
    </ul>
    </li>
    <li><a href="#">LỊCH SỬ, ĐỊA LÝ</a>
    <ul>
    <li><a href="#">Lịch sử Việt Nam</a></li>
    <li><a href="#">Lịch sử thế giới</a></li>
    <li><a href="#">Địa lý Việt Nam</a></li>
    <li><a href="#">Địa lý thế giới</a></li>
    </ul>
    </li>
    <li><a href="#">Y HỌC</a>
    <ul>
    <li><a href="#">Y học thường thức</a></li>
    <li><a href="#">Y học cổ truyền</a></li>
    <li><a href="#">Sinh sản / Nuôi con</a></li>
    </ul>
    </li>
    <li><a href="#">THỂ THAO, GIẢI TRÍ</a>
    <ul>
    <li><a href="#">Giải trí khác</a></li>
    <li><a href="#">Thể dục / Thể thao</a></li>
    <li><a href="#">Yoga / Thiền</a></li>
    <li><a href="#">Sách cờ</a></li>
    <li><a href="#">Trò chơi / Giải trí</a></li>
    </ul>
    </li>
    <li><a href="#">QUAYSACH TUYỂN TẬP</a></li>
    </ul>
    </div>
    </body>
    </html>

    còn đây là CSS để định dạng menu:
    *{
    margin:0;padding:0;
    }
    #Dropdown
    {
    border:1px solid white;
    background:#006600;
    float:left;
    }
    #Dropdown ul{
    float:left;
    list-style:none;
    }
    #Dropdown ul li{
    position:relative;
    float:left;
    padding:5px 3px 5px 3px;
    }
    #Dropdown li a{
    color:red;
    padding:20px;
    font-weight:bold;
    text-decoration:none;
    }
    #Dropdown li a:hover{
    color:yellow;
    }
    #Dropdown li ul{
    font-size:14px;
    display:none;
    }
    #Dropdown ul li:hover ul{
    position:absolute;
    display:block;
    width:234px;
    top:30px;
    left:30px;
    background:white;
    }
    #Dropdown ul li ul li{
    font-size:15px;
    width:100%;
    border-bottom:1px dotted red;
    }
    #Dropdown ul li:hover ul li a{
    color:black;
    width:234px;
    }
    #Dropdown ul li:hover ul li:hover{
    color:red;
    width:100%;
    background:#66FF00;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    }
    khi hover vào menu cha thì các menu con không nằm đè lên các menu cha khác mà nó nằm dưới nên cứ chạm vào các menu cha hoài.
    Đây là hình mình bị lỗi:
    [​IMG][​IMG]Mong các bạn có thể chỉnh sửa giúp mình với, code css mình còn gà lắm.

    ...
  2. banbaonylong

    banbaonylong Ko phải assmin

    bị đè lớp css, bạn nên phân tách ra, thay vì xài
    #Dropdown ul
    #Dropdown ul li
    thì xài
    #Dropdown > ul
    #Dropdown > ul > li

  3. Pangting

    Pangting Thành viên cấp 1

    bạn tăng z-index cho dòng này

    #Dropdown ul li:hover ul {
    z-index: 9999;
    }
Từ khóa:

Ủng hộ diễn đàn