html - 让我的列表项中包含的每个 DIV 在列表项悬停时准确地居中于 1024px 宽

Question

我试图让包含在每个列表项中的 DIV 在每个列表项悬停时准确地居中，宽度为 1024 像素。

我还需要将右边的 3 个辅助导航链接右对齐而不是左对齐，这样当用户悬停时，导航菜单将立即可用(而不是试图“跳”到菜单的左侧。我想要与此站点类似的对齐功能:https://www.michaeljfox.org/

代码在下面，工作演示在下面进一步:

    <div id="nav-wrapper-sot">
    <div id="navmenu-sot">

    <ul class="nav-sot" >

    <li id="about"><a href="#">About</a>
     <div class="about_content">
       <a href="">Vision & Policies</a><a href="">Notable Members</a><a href="">History</a><a href="">Affiliates</a><a href="">Financial Information</a>    
            </div>





    </li>
    <li id="members"><a href="#">Members & Groups</a>
     <div class="members_content">
           <a href="">Membership</a><a href="">Postdoctoral</a><a href="">Graduate Students</a>  
            </div>
    </li>
    <li id="meetings"><a href="#">Meetings & Events</a>
    <div class="meetings_content">
             <a href="">Annual Meeting</a><a href="">Events Calendar</a><a href="">Sponsored Meetings</a><a href="">Co-Hosted Events</a>  
            </div>
    </li>
    <li id="pubs"><a href="#">Publications & News</a>
    <div class="pubs_content">
       <a href="">Annual Meeting Publications</a><a href="">Newsroom</a><a href="">Advertising</a>    
            </div>
    </li>
    <li id="awards"><a href="#">Awards & Funding</a>
    <div class="awards_content">
              <a href="">Awards</a><a href="">Grants & Funding</a><a href=""> Endowment Fund</a>  
            </div>
    </li>
    <li id="careers"><a href="#">Careers</a>
    <div class="careers_content">
           <a href="">Job Bank</a><a href="">Mentor</a><a href="">Internships & Fellowships</a><a href="">Career Development Resources</a><a href="">Salary Surveys</a>     
            </div>
    </li>
    <li id="education"><a href="#">Education</a>
    <div class="education_content">
             <a href="">Continuing Education</a><a href="">Presentations & Webinars</a><a href="">Students</a><a href="">Educators</a><a href="">K-12 Outreach</a>  
            </div>
    </li>
    <li id="global"><a href="#">Global Programs </a>
    <div class="global_content">
             <a href="">International Grants</a><a href=""> Membership</a><a href="">Education Resources</a><a href="">News & Events</a><a href="">Global  Exchange Program</a>  
            </div>
    </li>
    <li id="mylinks"><a href="#">My Links</a>
    <div class="mylinks_content">
      <a href="">My Links links</a> 
            </div>
    </li>
    </ul>

      </div>
    </div>

---

    #nav-wrapper-sot {
        clear:both;
        width:100%; 
        background: #ff6633;
        margin 0 auto;
    }



      #navmenu-sot {

            margin 0 auto;
            width:100%;


    }


    #navmenu-sot > ul  {
        list-style-type: none;

        padding: 0px;
    }

     .nav-sot {  text-align:center;  }



    .nav-sot > li {
        padding: 0px;
        height: 30px;
        font-family:   Arial, Helvetica, sans-serif;
        letter-spacing: -0.5px;
        font-size: 14px;
      display:inline-block;
      background: #ff6633;
         border-right: 1px solid #D6D3D3;


    }

    .nav-sot > li > a {
        display: block;
        height: 100%;
        padding: 0px;
        color: #FFFFFF;
        text-decoration: none;
        text-align: center;
        line-height: 32px;


    }




    #navmenu-sot  li:hover > a {
        color:#ff6633;
         padding:0px;
        display:block;
        background:white;
      font-weight:bold;
    }







    #about    {

        border-left:1px solid #D6D3D3;

    }


    #about   a {

        width: 75px;


    }

    #members a {

         width: 137px;
    }

    #meetings a {

        width: 138px;
    }

    #pubs a {

        width: 142px;
    }


    #awards a {

        width: 126px;
    }

    #careers a {

        width: 77px;
    }


    #education a {

        width: 80px;
    }

    #global a {

        width: 125px;
    }

    #mylinks a {
        background: #3399cc;
        color: #f2f5eb;
          width: 85px;
          border-right:none;
    }




      .about_content, .members_content, .meetings_content, .pubs_content, .awards_content, .careers_content, .education_content, .global_content, .mylinks_content 
      { 
        position:absolute;
        display:none;
       top:45px;

       border: 1px solid #ff6633;

        padding-top:12px;
        padding-bottom:12px;

        text-align:left;
        z-index:-1;
        width:1024px;
      }

       .about_content a, .members_content a, .meetings_content a, .pubs_content a, .awards_content a, .careers_content a, .education_content a, .global_content a, .mylinks_content a { 

         text-decoration:none;
         color:#ff6633;
         padding:12px;

         margin:0px;

       }

    #navmenu-sot li:hover .about_content, 
    #navmenu-sot li:hover .members_content, 
    #navmenu-sot li:hover .meetings_content,
    #navmenu-sot li:hover .pubs_content,
    #navmenu-sot li:hover .awards_content,
    #navmenu-sot li:hover .careers_content, 
    #navmenu-sot li:hover .education_content, 
    #navmenu-sot li:hover .global_content, 
    #navmenu-sot li:hover .mylinks_content 

    {

          display:block;

    }


    .nav-sot  li div a:hover {
      background-color:#ff6633;
      color:#FFFFFF;
    }

---

演示: http://codepen.io/trevoray/pen/vEojjW/

Answer 1

#nav-wrapper-sot {
	clear:both;
	width:100%; 
	background: #ff6633;
  	margin 0 auto;
}



  #navmenu-sot {
		
		margin 0 auto;
		width:100%;
		
       
}

 
#navmenu-sot > ul  {
    list-style-type: none;
   
    padding: 0px;
}

 .nav-sot {  text-align:center;  }


  
.nav-sot > li {
    padding: 0px;
    height: 30px;
    font-family:   Arial, Helvetica, sans-serif;
    letter-spacing: -0.5px;
    font-size: 14px;
  display:inline-block;
  background: #ff6633;
     border-right: 1px solid #D6D3D3;
  
    
}

.nav-sot > li > a {
    display: block;
    height: 100%;
    padding: 0px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    line-height: 32px;
    
	 
}



 
#navmenu-sot  li:hover > a {
    color:#ff6633;
	 padding:0px;
    display:block;
	background:white;
  font-weight:bold;
}

 


 
 

#about    {
  
	border-left:1px solid #D6D3D3;
  
}


#about   a {
   
	width: 75px;
 
  
}

#members a {
   
	 width: 137px;
}

#meetings a {
  
	width: 138px;
}

#pubs a {
    
	width: 142px;
}


#awards a {
  
	width: 126px;
}

#careers a {
   
	width: 77px;
}


#education a {
  
	width: 80px;
}

#global a {
   
	width: 125px;
}
 
#mylinks a {
    background: #3399cc;
    color: #f2f5eb;
	  width: 85px;
	  border-right:none;
}
 

 
 
  .about_content, .members_content, .meetings_content, .pubs_content, .awards_content, .careers_content, .education_content, .global_content, .mylinks_content 
  { 
    position:absolute;
    display:none;
   top:45px;
   
   border: 1px solid #ff6633;
   
    padding-top:12px;
    padding-bottom:12px;
    
    text-align:left;
    z-index:-1;
    width:1024px;
  	margin: 0 0 0 -512px;
  	left: 50%;
  }

   .about_content a, .members_content a, .meetings_content a, .pubs_content a, .awards_content a, .careers_content a, .education_content a, .global_content a, .mylinks_content a { 
     
     text-decoration:none;
     color:#ff6633;
     padding:12px;
    
     margin:0px;
     
   }
 
#navmenu-sot li:hover .about_content, 
#navmenu-sot li:hover .members_content, 
#navmenu-sot li:hover .meetings_content,
#navmenu-sot li:hover .pubs_content,
#navmenu-sot li:hover .awards_content,
#navmenu-sot li:hover .careers_content, 
#navmenu-sot li:hover .education_content, 
#navmenu-sot li:hover .global_content, 
#navmenu-sot li:hover .mylinks_content 

{
    
	  display:block;
     
}

#navmenu-sot li:hover .awards_content,
#navmenu-sot li:hover .careers_content, 
#navmenu-sot li:hover .education_content, 
#navmenu-sot li:hover .global_content, 
#navmenu-sot li:hover .mylinks_content 

{
    
	  text-align: right;
     
}


.nav-sot  li div a:hover {
  background-color:#ff6633;
  color:#FFFFFF;
}
 

<div id="nav-wrapper-sot">
<div id="navmenu-sot">

<ul class="nav-sot" >

<li id="about"><a href="#">About</a>
 <div class="about_content">
   <a href="">Vision & Policies</a><a href="">Notable Members</a><a href="">History</a><a href="">Affiliates</a><a href="">Financial Information</a>    
        </div>
  
  
 
  
  
</li>
<li id="members"><a href="#">Members & Groups</a>
 <div class="members_content">
       <a href="">Membership</a><a href="">Postdoctoral</a><a href="">Graduate Students</a>  
        </div>
</li>
<li id="meetings"><a href="#">Meetings & Events</a>
<div class="meetings_content">
         <a href="">Annual Meeting</a><a href="">Events Calendar</a><a href="">Sponsored Meetings</a><a href="">Co-Hosted Events</a>  
        </div>
</li>
<li id="pubs"><a href="#">Publications & News</a>
<div class="pubs_content">
   <a href="">Annual Meeting Publications</a><a href="">Newsroom</a><a href="">Advertising</a>    
        </div>
</li>
<li id="awards"><a href="#">Awards & Funding</a>
<div class="awards_content">
          <a href="">Awards</a><a href="">Grants & Funding</a><a href=""> Endowment Fund</a>  
        </div>
</li>
<li id="careers"><a href="#">Careers</a>
<div class="careers_content">
       <a href="">Job Bank</a><a href="">Mentor</a><a href="">Internships & Fellowships</a><a href="">Career Development Resources</a><a href="">Salary Surveys</a>     
        </div>
</li>
<li id="education"><a href="#">Education</a>
<div class="education_content">
         <a href="">Continuing Education</a><a href="">Presentations & Webinars</a><a href="">Students</a><a href="">Educators</a><a href="">K-12 Outreach</a>  
        </div>
</li>
<li id="global"><a href="#">Global Programs </a>
<div class="global_content">
         <a href="">International Grants</a><a href=""> Membership</a><a href="">Education Resources</a><a href="">News & Events</a><a href="">Global  Exchange Program</a>  
        </div>
</li>
<li id="mylinks"><a href="#">My Links</a>
<div class="mylinks_content">
  <a href="">My Links links</a> 
        </div>
</li>
</ul>
  
  </div>
</div>

无论如何，这将是一个修复，这里是添加的行

 width: 1024px;
 margin: 0 0 0 -512px;
 left: 50%;

好的，这是它如何工作的解释

x = 子宽度 = 1024px;
y = x/2 = 602px;

左:50%；
边距:0 0 0 -y;

解释为什么它与我所说的不同是因为链接没有居中，所以我得到了最接近的相关数字，正如你所看到的，它的准确点适用于所有浏览器。

有关如何使绝对定位元素居中的更多信息，请转到此处 http://designshack.net/articles/css/how-to-center-anything-with-css/
然后转到“居中绝对定位的元素”它还有一些您可以使用的其他示例。

至于我刚刚添加的正确对齐方式

#navmenu-sot li:hover .awards_content,
#navmenu-sot li:hover .careers_content, 
#navmenu-sot li:hover .education_content, 
#navmenu-sot li:hover .global_content, 
#navmenu-sot li:hover .mylinks_content {
text-align: right;   
}

希望对您有所帮助! :D