Danh sách item được đánh dấu nhưng không phải nguyên hàng

mHelpMe

New Member
#1
Fiddle của mình hiện tại vẫn đang làm việc tốt ngoài một điều. Khi di chuột qua nút thì danh sách được hiển thị. Sau đó, khi di chuột qua một danh sách item thì nền sẽ thay đổi màu sắc. Tuy nhiên khi danh sách item thay đổi màu sắc thì gần như box ở bên trái của item không được đánh dấu và dường như không thể loại bỏ nó?
Mã:
.dropbtn {
    background-color: #9FACEC;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
 }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
 }

.dropdown-content li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content li:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}
 

Admin

Administrator
Thành viên BQT
#2
Theo mặc định, hầu hết các thẻ HTML có một số kiểu mặc định, giống như ở trong thẻ ul và đó là lý do khi bạn di chuyển các thẻ li bên trái không được đánh dấu.

Kiểu ul mặc định,
Mã:
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Mã:
$(document).ready(function() {

  var $region = $('#regionList');
  $region.append('<li id="Europe">Europe</li>');
  $region.append('<li id="Japan">Japan</li>');
  $region.append('<li id="North America">North America</a></li>');

  $("#regionList li").click(function() {
    alert('Clicked list. ' + this.id);
  });

})
Mã:
    /* Dropdown Button */

    .dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
    }

    /* The container <div> - needed to position the dropdown content */

    .dropdown {
      position: relative;
      display: inline-block;
    }

    ul {
      padding: 0px;
      margin: 0px;
    }

    /* Dropdown Content (Hidden by Default) */

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */

    .dropdown-content li {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    /* Change color of dropdown links on hover */

    .dropdown-content li:hover {
      background-color: #ddd;
    }

    /* Show the dropdown menu on hover */

    .dropdown:hover .dropdown-content {
      display: block;
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */

    .dropdown:hover .dropbtn {
      background-color: #4C66E9;
    }

    .selected {
      background: #FF00FF;
    }

/*Add this*/
ul{
  padding-left:0px;
}
Mã:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn">Regions</button>
  <div class="dropdown-content">
    <ul id="regionList"></ul>
  </div>
</div>
Vì vậy, bạn cần thêm thẻ ul và đặt padding-left thành 0px. Bạn có thể thêm padding-left trong thẻ li để có khoảng cách trước văn bản.
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top