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

Nhờ các bạn chỉnh giúp mình đoạn Code dưới đây.

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi anhtuan1006, 4/7/16.

Lượt xem: 3,426

  1. anhtuan1006 Thành viên cấp 2

    Các bạn xem hộ và chỉnh giúp mình đoạn Code dưới đây:
    HTML:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">

li{
    height:50px;
    width:129px;
    border-left:solid thin;
    background-color:#F00;
    float:left;
    text-align:center;
    line-height:50px;
    list-style-type:none}

li a{
    text-decoration:none}
  
li:hover{
    background-color:#00F}


li a:hover{
    color:#FFF;}

ul{
    display:none}
  
li:hover ul{
    display:block}
  
</style>

</head>

<body>
<div style="width:650px; height:500px; border:solid thin">
        <div style="width:650px; height:50px; font-weight:600">
      
              <li style="border-left:none"><a href="#">Chính trị - Xã hội</a>
                 <ul>
                    <li><a href="#">An Ninh</a></li>
                    <li><a href="#">Quốc Phòng</a></li>
                    <li><a href="#">Địa Phương</a></li>
                    <li><a href="#">Nông Thôn</a></li>
                 </ul>
              </li>
            
              <li><a href="#">Thế giới</a></li>
              <li><a href="#">Nhịp sống trẻ</a></li>
              <li><a href="#">Giáo dục</a></li>
              <li><a href="#">Kinh tế</a></li>
          
        </div>
</div>
</body>
    Tại sao khi mình rê chuột vào mục Chính trị - Xã hội thì danh sách bên dưới không nằm liền kề và thẳng với mục bên trên mà lại bị lệch ra ngoài vậy.

    Mình mới học về HTML- CSS nên rất mong được các banj giúp đỡ !

    ...

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

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    anhtuan1006, 4/7/16
    #1
  2. blademaster_sf

    blademaster_sf Thành viên cấp 2

    Lâu mình không làm rùi nhưng mà bạn làm sai lý thuyết rồi.
    Thêm <ul></ul> bao quanh mục menu của bạn, phía dưới dòng: <div style="width:650px; height:50px; font-weight:600">
    ---> Làm j có chuyện chỉ có li mà ko có ul bao quanh

    Đổi dòng ul{display:none} thành ul li ul{display:none}

    Còn bạn muốn chính xác lục drop menu di cách menu chính 1 khoảng nào đó thì có thể dùng thêm position
    blademaster_sf, 4/7/16
    #2
    anhtuan1006 thích bài viết này
  3. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn ơi, mình thêm cặp thẻ <ul></ul> vào vị trí như bạn nói rồi mà vẫn không được.

    Bạn xem giúp mình với
    anhtuan1006, 4/7/16
    #3
  4. blademaster_sf

    blademaster_sf Thành viên cấp 2

    RWPeBYF.png

    Nếu bạn muốn drop -menu thẳng hàng với cái menu hover vào thì bạn thêm dòng
    position: relative vào cái li chứa cái menu con
    còn menu con (ul) phía dưới thì thêm dòng absolute j ấy mình quên mất từ rồi hihi
    nếu vấn bị lệch thì thêm dòng padding:0px; vào cái (ul li ul) là được :)

    Kqq0wMN.png
    Chỉnh sửa lần cuối: 4/7/16
    blademaster_sf, 4/7/16
    #4
    anhtuan1006 thích bài viết này
  5. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Mình vẫn chưa thực hiện được bạn ơi.

    Bạn vui lòng gửi luôn Code lên được không ...
    anhtuan1006, 4/7/16
    #5
  6. blademaster_sf

    blademaster_sf Thành viên cấp 2

    Đến lúc bạn làm đc rồi thì lại thấy max dễ ngay :v Bạn nhớ là có 2 thẻ ul nhé. 1 cái bao hết menu, 1 cái là của menu xổ xuống

    Code:
    <html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title>
<style type="text/css" media="all"> li{ height:50px; width:129px; border-left:solid thin; background-color:#F00; float:left; text-align:center; line-height:50px; list-style-type:none} li a{ text-decoration:none} li:hover{ background-color:#00F}li a:hover{ color:#FFF;}

ul li ul{ display:none;}
ul li.hold{ position:relative;}
ul li ul{ position:absolute;padding:0px}
li:hover ul{ display:block} </style> </head>


<body>
<div style="width:650px; height:500px; border:solid thin">
<div style="width:800px; height:50px; font-weight:600">
<ul>
<li style="border-left:none" class="hold"><a href="#">Chính Xã h?i</a>
<ul>
<li><a href="#">An Ninh</a></li>
<li><a href="#">Qu?cng</a></li>
<li><a href="#">Ð?a Png</a></li>
<li><a href="#">Nông Thôn</a></li>
</ul>
</li>
<li><a href="#">Thgi?i</a></li>
<li><a href="#">N s?ng tr?</a></li>
<li><a href="#">Giá?c</a></li>
<li><a href="#">Kint?</a></li>
</ul>
</div>
</div>
</body>


</html>
    Chỉnh sửa lần cuối: 4/7/16
    blademaster_sf, 4/7/16
    #6
    anhtuan1006 thích bài viết này
  7. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    OK rồi. Cảm ơn bạn blademaster_sf nhiều nhé.

    Mình sẽ nghiên cứu dần dần
    anhtuan1006, 4/7/16
    #7

Ủng hộ diễn đàn