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>