对齐菜单右侧的下拉菜单
问题描述:
我正在创建一个网站,菜单中有两个下拉菜单,一个左对齐,另一个右对齐菜单。我尝试使用空格对齐另一个下拉菜单,但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标签,但它不是与第二个可能的。在此先感谢
答
您可以在您要在合适的位置上dorpdown使用float:right
和调用下拉元素时,这样你就不会重复一遍代码,你可能会想使用类,而不是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>
我没有看到你的代码2个下拉菜单... – VTodorov
我有ADDE以前,我已经移除了现在。你可以添加你自己的代码。 – RBK
首先,请不要复制粘贴你的代码在这里,无论如何发布更新。我们只看到一个下拉菜单,其次是哪里? – Pedram