1
如何将CSS辅助下拉菜单的一个部分放到左边而不是右边？在CSS下拉菜单中对齐元素
关于第二个下拉菜单，我希望第二个下拉菜单移动到左侧而不是右侧。我尝试了几种不同的方式，但没有运气。这里是代码。
感谢您的帮助！ :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
/* Update the font type and size here */
* {
margin: 0;
padding: 0;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:15px;
}
/*Update the main horizontal background color here - it is currently NCR green */
#main_nav ul {
background: #54B948;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
/*Update the width of the individual navigation here */
#main_nav li {
float: left;
position: relative;
width: 220px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a{
text-transform: uppercase;
}
/*Update the color of the font here */
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #ffffff;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
/*1st menu dropdown */
#main_nav ul li.menu_1 ul.drop_1 li:hover {
background: #E14F3C;
}
#main_nav ul li.menu_1:hover {
background: #E14F3C;
}
#main_nav ul li.menu_1 ul.drop_1 li{
background: #b12614;
}
/* END 1st menu dropdown */
/*2nd menu dropdown */
#main_nav ul li.menu_2 ul.drop_2 li:hover {
background: #8080D9;
}
#main_nav ul li.menu_2:hover {
background: #8080D9;
}
#main_nav ul li.menu_2 ul.drop_2 li{
background: #3435c2;
}
/*END 2nd menu dropdown */
/*3rd menu dropdown */
#main_nav ul li.menu_3:hover {
background:#F4A725;
}
/*4th menu dropdown */
#main_nav ul li.menu_4:hover {
background:#5CD8EE;
}
/*END 4th menu dropdown */
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<nav id="main_nav">
<ul>
<li class="menu_1">
<a href="">Executes: Grades 6-10</a>
<ul class="drop_1">
<li><a href="">Core Competencies</a>
<ul>
<li><a href="">Customer Dedication</a></li>
<li><a href="">Drive for Results</a></li>
<li><a href="">Innovation</a></li>
<li><a href="">Problem Solving</a></li>
<li><a href="">Teamwork</a></li>
</ul>
</li>
<li><a href="">Optional Leadership Competencies</a>
<ul>
<li><a href="">Continuous Learning</a></li>
<li><a href="">Managing Vision & Purpose</a></li>
<li><a href="">Organizational Agility</a></li>
<li><a href="">Global Business Knowledge</a></li>
<li><a href="">Courage in Mgt & Conflict</a></li>
<li><a href="">Perspective</a></li>
<li><a href="">Priority Setting</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu_2">
<a href="">Guides: Grades 11-14</a>
<ul class="drop_2">
<li>
<a href="">Core Competencies</a>
<ul>
<li><a href="">Customer Dedication</a></li>
<li><a href="">Drive for Results</a></li>
<li><a href="">Innovation</a></li>
<li><a href="">Problem Solving</a></li>
<li><a href="">Teamwork</a></li>
</ul>
</li>
<li>
<a href="">Required Leadership Competencies</a>
<ul>
<li><a href="">Perspective</a></li>
<li><a href="">Priority Setting</a></li>
</ul>
</li>
<li>
<a href="">Optional Leadership Competencies</a>
<ul>
<li><a href="">Continuous Learning</a></li>
<li><a href="">Managing Vision & Purpose</a></li>
<li><a href="">Organizational Agility</a></li>
<li><a href="">Global Business Knowledge</a></li>
<li><a href="">Courage in Mgt & Conflict</a></li>
</ul>
</li>
</ul>
<li class="menu_3">
<a href="">Shapes: Grade 15</a>
</li>
<li class="menu_4">
<a href="">Inspires: Grades 16+</a>
</li>
</body>
</html>