右边对齐最后一个导航菜单弹出CSS

Question

我希望将我的导航结构的“弹出”菜单右对齐到div的右边缘。目前，它正在“突然出现”div。有关如何完成此任务的任何建议？

	.main-navigation {


	  background-color: #2f9fa8;


	}


	.subMenu li:hover > a {


	  color: #e3d174;


	  text-decoration: underline;


	}


	#GeneralInfo {


	  width: 160px;


	  padding-top: 5px;


	  padding-left: 20px;


	}


	#Registration {


	  width: 200px;


	  padding-top: 5px;


	  padding-left: 20px;


	}


	#ScientificPrograms {


	  width: 175px;


	  padding-top: 5px;


	  padding-left: 20px;


	}


	#SpecialEvents {


	  width: 110px;


	  padding-top: 5px;


	  padding-left: 20px;


	}


	#Careers {


	  width: 70px;


	  padding-top: 5px;


	  padding-left: 20px;


	}


	#Exhibits {


	  width: 90px;


	  padding-top: 5px;


	  padding-left: 20px;


	}


	.subMenu {


	  width: 200px;


	}


	#navMenu ul,


	#navMenu {


	  list-style-type: none;


	  margin: 0;


	  padding: 0;


	}


	.nav > li > a {


	  display: block;


	  height: 100%;


	  color: #FFFFFF;


	  text-decoration: none;


	  padding: 0;


	  font-size: 14px;


	  font-weight: 800;


	  outline: none;


	}


	.nav > li > a:hover {


	  display: block;


	  height: 100%;


	  padding: 0;


	  color: #FFFFFF;


	  text-decoration: none;


	  background: #2f9fa8;


	}


	.nav > li {


	  padding: 0;


	  float: left;


	  height: 30px;


	  font-family: Arial, sans-serif;


	  font-size: 14px;


	  background-color: #2f9fa8;


	}


	.nav li {


	  position: relative;


	}


	.nav li > ul {


	  position: absolute;


	  display: none;


	  border-bottom: 0;


	  z-index: 9999;


	}


	.nav li > ul > li > a {


	  text-decoration: none;


	  color: #FFFFFF;


	  font-weight: 600;


	  display: block;


	  background: #2f9fa8;


	  text-shadow: none;


	  padding: 5px 3px 5px 10px;


	  text-indent: -7px;


	}


	.nav li:hover > ul {


	  display: block;


	}


	

<nav class="main-navigation">
  <ul id="navMenu" class="nav">


    <li id="GeneralInfo"><a class="gradient" href="#">General Information</a>
      <ul class="subMenu" id="sub-GeneralInfo">
        <li><a href='#'>Annual Meeting</a>
        </li>
        <li><a href='#'>San Diego, CA</a>
        </li>
        <li><a href='#'>Supporters</a>
        </li>
        <li><a href='#'>Just for the Media</a>
        </li>
        <li><a href='#'>Volunteer</a>
        </li>
        <li><a href='#'>Awards and Fellowships</a>
        </li>
        <li><a href='#'>FAQs</a>
        </li>
        <li><a href='#'>Forms</a>
        </li>
        <li><a href='#'>Events and Maps</a>
        </li>
        <li><a href='#'>Meeting Requests</a>
        </li>
        <li><a href='#'>Visa Information</a>
        </li>
        <li><a href='#'>Transportation</a>
        </li>
        <li><a href='#'>Ride Share Program</a>
        </li>
        <li><a href='#'>Restaurants</a>
        </li>
        <li class='last'><a href='#'>Top Reasons to Attend</a>
        </li>
      </ul>

    </li>



    <li id="Registration"><a class="gradient" href="#">Registration &amp; Housing</a>
      <ul class="subMenu" id="sub-Registration">
        <li><a href='#'>Online Registration</a>
        </li>
        <li><a href='#'>Registration Information</a>
        </li>
        <li><a href='#'>Housing Reservations</a>
        </li>
        <li class='last'><a href='#'>Room Share Program</a>
        </li>
      </ul>
    </li>



    <li id="ScientificPrograms"><a class="gradient" href="#">Scientific Programs</a>
      <ul class="subMenu" id="sub-ScientificPrograms">
        <!--<li><a href='#'>Submit a Session Proposal</a></li>-->
        <li><a href='#'>Submit an Abstract</a>
        </li>
        <li><a href='#'>Mobile Event App</a>
        </li>
        <!--<li><a href='#'>Scientific Session Index</a></li>-->
        <!--<li><a href='#'>Abstract Author Index</a></li>-->
        <!--<li><a href='#'>Abstract Keyword Index</a></li>-->
        <li><a href='#'>Continuing Education</a>
        </li>
        <li><a href='#'>Continuing Medical Education</a>
        </li>
        <li><a href='#'>Scientific Sessions</a>
        </li>
        <li><a href='#'>Thematic Approach</a>
        </li>
        <!--<li><a href='#'>Scientific ePosters</a></li>-->
        <li class='last'><a href='#'>Presentation Instructions</a>
        </li>
      </ul>
    </li>



    <li id="SpecialEvents"><a class="gradient" href="#">Special Events</a>
      <ul class="subMenu" id="sub-SpecialEvents">
        <li><a href='#'>Outreach</a>
        </li>
        <li><a href='#'>Featured Sessions</a>
        </li>
        <li><a href='#'>Social Events</a>
        </li>
        <li><a href='#'>Student and Postdoc Scholar Events</a>
        </li>
        <li><a href='#'>Satellite Meetings</a>
        </li>
        <li><a href='#'>Meeting Requests</a>
        </li>
        <li class='last'><a href='#'>Virtual Global Gallery Posters</a>
        </li>
      </ul>
    </li>



    <li id="Careers"><a class="gradient" href="#">Careers</a>
      <ul class="subMenu" id="sub-Careers">
        <li><a href='#'>Career Sessions</a>
        </li>
        <li><a href='#'>Career Resources and Development Services</a>
        </li>
        <li class='last'><a href='#'>Job Bank</a>
        </li>
      </ul>
    </li>



    <li id="Exhibits"><a class="gradient" href="#">Exhibits</a>
      <ul class="subMenu" id="sub-Exhibits">
        <li><a href='#'>ToxExpo</a>
        </li>
        <li><a href='#'>Exhibitor Listing</a>
        </li>
        <li><a href='#'>Exhibitor-Hosted Session Application</a>
        </li>
        <li><a href='#'>Exhibitor-Hosted Sessions</a>
        </li>
        <li><a href='#'>Support Opportunities</a>
        </li>
        <li class='last'><a href='#'>Supporter Listing</a>
        </li>
      </ul>
    </li>

  </ul>
</nav>

 

您也可以在codepen

中对其进行伪造

Answer 1

如果您希望将弹出菜单.nav li ul右对齐到容器＆＃34;触发＆＃34;菜单元素，您只需将right: 0;添加到.nav li > ul

即可

像：

.nav li > ul {
    position: absolute;
    display: none;
    border-bottom: 0;
    right: 0;
    z-index: 9999;
}