Question

我正在创建一个网站，菜单中有两个下拉菜单，一个与左边对齐，另一个与菜单的最右边对齐。我尝试使用空格对齐另一个下拉列表但是根本看不到子ul标签。下面是HTML和CSS供参考。请建议是否有。

＆＃13;

<script type="text/javascript">
$(document).ready(function(){
    $("#dropbtn").click(function(){
        $("#moreMgmt").toggleClass("show");
    });
    $("#dropbtn2").click(function(){
        $("#moreTech").toggleClass("show");
    });
});

＆＃13;

   <style>
body{
    font-family:Calibri;
}
.header{
    border:1px solid red;
}
.menu{
    overflow:hidden;
    background-color:#333;
    font-family:Arial;
}
.menu a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown #dropbtn {
    cursor: pointer;
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color:#333;
}
.menu a:hover, .dropdown:hover #dropbtn {
    background-color: limegreen;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #ddd;
}
.show {
    display: block;
}

#dropbtn2 {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

#dropbtn2:hover, #dropbtn2:focus {
    background-color: #3e8e41;
}

.dropdown2 {
    float: right;
    position: relative;
    display: inline-block;
    
}

.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    left:auto;
    z-index: 1;
}

.dropdown-content2 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown2 a:hover {background-color: #f1f1f1}

＆＃13;

    <div class="header">
    <h2>My Website</h2>
</div>

<!-- adding menu-->
<div class = "menu">
    <a href="#">Home</a>
    <a href="#">Home</a>
    <div class="dropdown">
       <button id="dropbtn">More</button>
          <div class="dropdown-content" id="moreMgmt">
            <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
          </div>
        </div>
        <div class="dropdown2">
          <button id="dropbtn2">More</button>
          <div class="dropdown-content2" id="moreTech">
               <a href="#">Home</a>
               <a href="#">Home</a>
               <a href="#">Home</a>
          </div>
        </div>
</div>

＆＃13;

我已经使用Jquery来切换第一个下拉列表的ul标签，但是第二个下拉列表不可能。提前致谢

Answer 1

你可以在你想要在右边定位的dorpdown上使用float:right，你可能想在调用dropdown元素时使用类而不是id，这样你就不会再重复代码了

请参阅代码段：

$(document).ready(function() {
  $(".dropdown button").click(function() {
   $(this).next().toggleClass("show");
  });
});

font-family:Calibri;

}
.header {
  border: 1px solid red;
}
.menu {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
.menu a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown button {
  cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #333;
}
.menu a:hover,
.dropdown:hover button {
  background-color: limegreen;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.show {
  display: block;
}
.dropdown-right {
  float: right;
}
.dropdown-right .dropdown-content{
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <h2>My Website</h2>
</div>

<!-- adding menu-->
<div class="menu">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <div class="dropdown">
    <button>More</button>
    <div class="dropdown-content" id="moreMgmt">
      <a href="#">Home</a>
      <a href="#">Home</a>
      <a href="#">Home</a>
    </div>
  </div>
  <div class="dropdown dropdown-right">
    <button>right</button>
    <div class="dropdown-content" id="moreMgmt">
      <a href="#">Home</a>
      <a href="#">Home</a>
      <a href="#">Home</a>
    </div>
  </div>
</div>

对齐菜单右侧的下拉菜单

1 个答案: