我正在创建一个网站,菜单中有两个下拉菜单,一个左对齐,另一个右对齐菜单。我尝试使用空格对齐另一个下拉菜单,但sub ul标签根本不可见。下面是HTML和CSS供参考。请提出建议。对齐菜单右侧的下拉菜单
<script type="text/javascript">
$(document).ready(function(){
$("#dropbtn").click(function(){
$("#moreMgmt").toggleClass("show");
});
$("#dropbtn2").click(function(){
$("#moreTech").toggleClass("show");
});
});
<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}
<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>
我已经使用jQuery来切换第一个下拉的UL标签,但它不是与第二个可能的。在此先感谢
我没有看到你的代码2个下拉菜单... – VTodorov
我有ADDE以前,我已经移除了现在。你可以添加你自己的代码。 – RBK
首先,请不要复制粘贴你的代码在这里,无论如何发布更新。我们只看到一个下拉菜单,其次是哪里? – Pedram