在CSS下拉菜單中對齊元素

如何將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>

來源

2014-10-03 smeeker

如果你希望一個菜單來打開到左側，則right必須爲0。因此，不是有left: 0或left: 100%變化，要right: 0，如果你需要覆蓋左側定位你也可以添加left:auto

如果這是你的第二個菜單這裏是一個更新的代碼

#main_nav ul ul { 
     position: absolute; 
     right: 0; 
     top: 100%; 
     visibility: hidden; 
     opacity: 0; 
    }

來源

2014-10-03 16:52:41 Caelea

在CSS下拉菜單中對齊元素

回答

相關問題