01/10/2018, 11:42
Hiển thị menu đa cấp
Tại sao menu đa cấp của mình không hiển thị theo chiều dọc xuống thay vì hiển thị dàn hàng ngang như hiện tại ạ?
đây là code của mình:
+) phần html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tuyết Thần Thiên Vũ Cung</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head>
<body> <div id="website"> <!-- phan top --> <div id="top"> <div id="top-left"></div> <div id="top-right"> <ul> <li>|</li> <li><a href="#">Đăng Nhập</a></li> <li>|</li> <li><a href="#">Đăng Ký</a></li> <li>|</li> </ul> </div> </div> <!-- phan banner --> <div id="banner"> <img src="img/backgroud-banner.png" /> </div> <!-- phan name --> <div id="name"> <div id="name-website"> <a href="#"><h1>Tuyết Thần Thiên Vũ Cung</h1></a> </div> <div id="name-bottom"> <p>nhân sinh này muộn phiền tích lũy. - đâu ai cười một kẻ vô tâm. - lỡ trăm năm có ngoảnh trông về. - cũng đừng vì hôm nay nuối tiếc.</p> </div> </div> <!-- phan menu --> <div id="menu"> <ul> <li><img src="img/gohome.png" /></li> <li><a href="#">Lệ Hoa Viên</a></li> <li><a href="#">Tuyết Huyền Điện</a> <ul class="submenu"> <li><a href="#">Thanh Đường</a></li> <li><a href="#">Tâm Đường</a></li> <li><a href="#">Nghiên Đường</a></li> <li><a href="#">Hiên Đường</a></li> <li><a href="#">Thủ Đường</a></li> </ul> </li> <li><a href="#">Viễn Thần Điện</a></li> <li><a href="#">Thiên Vấn Điện</a></li> <li><a href="#">Hiên Vân Điện</a></li> <li><a href="#">Trọng Hoa Cung</a></li> <li><a href="#">Chiêu Nhân Điện</a></li> <li><a href="#">Thông Tin Cung</a></li> </ul> </div> <!-- phan main --> <div id="main"> <div id="main-left"></div> <div id="main-right"> <div class="form-info"> <table border="10"> <tr> <td colspan="3">Top Thành Viên Chăm Hoạt Động</td> </tr> <tr> <td>Danh</td> <td>Hiệu</td> <td>Số bài post</td> </tr> <tr> <td>Diệp Phong</td> <td></td> <td>100</td> </tr> <tr> <td>Thạch Thiên</td> <td>Thiên</td> <td>100</td> </tr> <tr> <td>Thiên Tuyết</td> <td>Tuyết</td> <td>001</td> </tr> </table> </div> <div class="form-info"> <h3><a href="#">Cung Quy</a></h3> <p>– Tuyết Thần Thiên Vũ Cung được thành lập với mục tiêu đem đến niềm vui cho mọi người.</p> <p>– Đây là nơi giao lưu, kết bạn, post truyện, dịch truyện…. Phục vụ mọi người để giải trí nhằm mục đích phi lợi nhuận....</p> <a href="#" target="_blank" style="color:#0000FF;">xem thêm</a> </div> <div class="form-info"> <h3><a href="#">Thanh Tuyết Cung Chủ – Giáng Thiên Tuyết</a></h3> <img src="img/thanhtuyet.png" width="248px" /> <p>Ta ước gì có thể quên đi người, để không còn nhung nhớ hay chờ đợi.</p> </div> <div class="form-info"> <h3><a href="#">Tả Hộ Pháp</a></h3> <img src="img/tahophap.png" width="248px" height="290px" /> <p>Nếu ngay từ đầu không gặp không thương thì sẽ chẳng còn đau khổ.</p> </div> </div> </div> </div> </body> </html>
phần css:
/* phan top */
@charset "utf-8";
/*CSS comment*/
*{
margin:0px;
padding:0px;
}
a{
text-decoration:none;
}
ul{
list-style-type:none;
}
body{
font-family:Arial, Helvetica, sans-serif;
font-size:small;
background:#CCCCCC;
}
img{
border:0px;
}
#website{
width:1100px;
margin:auto;
background:#FFFFFF;
border:1px solid #000000;
}
#top{
width:982px;
height:38px;
margin:auto;
background:#CCCCCC;
}
#top-left{
float:left;
}
#top-right{
float:right;
}
#top-right ul{
padding:2px 19px 0px 0px;
}
#top-right ul li{
float:left;
margin:8px;
color:#000;
}
#top-right ul li a{
color:#006;
}
#top-right ul li a:hover{
color:#FF0000;
}
/* phan banner */
#banner{
width:982px;
height:358px;
margin:auto;
}
/* phan name */
#name{
width:982px;
height:70px;
margin:auto;
background:#FFFFFF;
}
#name-website{
width:982px;
height:30px;
text-align:center;
padding-top:10px;
}
#name-website >a{
color:#F20B22;
}
#name-website a:hover{
color:#CCCCCC;
}
#name-bottom{
width:982px;
height:40px;
font-size:16px;
text-align:center;
color:#CCCCCC;
line-height:40px;
}
/* phan menu */
#menu{
width:982px;
height:40px;
line-height:40px;
background:#000000;
margin:10px auto;
border:1px solid #000000;
}
#menu ul > li{
float:left;
}
#menu ul li a{
color:#CCCCCC;
padding:0 10px 0 10px;
font-size:14px;
}
#menu ul li a:hover{
color:#FFFFFF;
}
#menu img{
float:left;
border-right:1px solid #CCCCCC;
padding:2px;
}
.submenu{
display:none;/*thuộc tính ẩn menu đa cấp đã tạo*/
position:absolute; z-index:90; /* thuộc tính giúp menu đa cấp nổi lên li đã cố đinh*/
background-color:#A61E92;
border:1px solid #000;
}
.submenu li{
border-right:1px solid #000;
border-bottom:1px solid #000000;
}
#menu li:hover .submenu{
display:block;
}
/* phan main */
#main{
width:982px;
height:1200px;
margin:15px auto;
position:relative;
}
#main-left{
width:700px;
height:798px;
float:left;
border:1px solid #000000;
}
#main-right{
width:270px;
float:right;
border:1px solid #CCCCCC;
}
.form-info{
width:250px;
/*height:340px;*/
margin:10px auto;
border-radius:6px;
text-align:center;
padding:5px 1px 1px 1px;
border:1px solid #CCCCCC;
}
.form-info a{
color:#FF0000;
}
.form-info a:hover{
color:#000000;
}
.form-info table{
width:248px;
}
Bài liên quan
Bạn đưa code web lên thì bạn có thể dùng codepen, jsbin…Đừng post hình như vầy.
Học dần sử dụng mấy cái ide online đy, gửi phát là người ta thấy luôn code, xem luôn được kết quả.
vâng, mình xin ghi nhớ ạ