Lỗi tạo Menu trong CSS

nguoidubi3416 · 9/11/13

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;
top0px;
left0px;
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:
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.

banbaonylong · 10/11/13

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

Pangting · 12/11/13

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

#Dropdown ul li:hover ul {
z-index: 9999;
}

Đăng Nhập hoặc Đăng Ký

Lỗi tạo Menu trong CSS

nguoidubi3416 Mới đăng kí

Xem thêm các chủ đề cùng chuyên mục

banbaonylong Ko phải assmin

Pangting Thành viên cấp 1

Ủng hộ diễn đàn

Dự án con

Box tiêu biểu

Giải trí

Đăng Nhập hoặc Đăng Ký

Lỗi tạo Menu trong CSS

nguoidubi3416 Mới đăng kí

Xem thêm các chủ đề cùng chuyên mục

banbaonylong Ko phải assmin

Pangting Thành viên cấp 1

Ủng hộ diễn đàn

Tìm kiếm hữu ích