css下拉菜单居左

CSS下拉菜单可以轻松地为网站添加导航功能和用户交互性。

通常来说，下拉菜单会水平居中放置，但有时我们需要将其居左。下面是一个简单的示例：

 <div class="dropdown">
    <button class="dropbtn">菜单</button>
    <div class="dropdown-content">
      <a href="#">选项 1</a>
      <a href="#">选项 2</a>
      <a href="#">选项 3</a>
    </div>
  </div>
  
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      left: 0;
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .show {
      display: block;
    }
  </style>

  <script>
    var dropdown = document.getElementsByClassName("dropdown");
    var i;

    for (i = 0; i < dropdown.length; i++) {
      dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var dropdownContent = this.getElementsByClassName("dropdown-content")[0];
        if (dropdownContent.style.display === "block") {
          dropdownContent.style.display = "none";
        } else {
          dropdownContent.style.display = "block";
        }
      });
    }
  </script> 

上述代码片段中，将下拉菜单的“.dropdown-content”部分的“position”属性设置为“absolute”，并将其“left”属性设置为0，即可实现将下拉菜单居左的效果。

通过将鼠标悬停在“菜单”按钮上，可显示下拉菜单，再次单击按钮即可隐藏菜单。

通过在此示例中的CSS中进行微调，您可以改变下拉菜单的外观和交互方式，以适应您的网站需要。