Html 使我的列表项中包含的每个DIV在悬停列表项时保持在1024px宽的中心位置

当每个列表项悬停在上方时，我试图使每个列表项中包含的DIV保持在1024px宽的中心位置

我还需要右3个辅助导航链接右对齐，而不是左对齐，这样当用户悬停时，导航菜单将立即可访问（而不是尝试“跳转”到菜单的左侧。我希望类似于此网站的对齐功能：

下面是代码，下面是工作演示：

    <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>

---

演示：

#导航包装器sot{
明确：两者皆有；
宽度：100%；
背景#ff6633；
保证金0自动；
}
#导航菜单{
保证金0自动；
宽度：100%；
}
#导航菜单sot>ul{
列表样式类型：无；
填充：0px；
}
.nav sot{text align:center；}
.nav sot>li{
填充：0px；
高度：30px；
字体系列：Arial、Helvetica、无衬线字体；
字母间距：-0.5px；
字体大小：14px；
显示：内联块；
背景#ff6633；
右边框：1px实心#D6D3D3；
}
.nav sot>li>a{
显示：块；
身高：100%；
填充：0px；
颜色：#FFFFFF；
文字装饰：无；
文本对齐：居中；
线高：32px；
}
#导航菜单sot li：悬停>a{
颜色：#ff6633；
填充：0px；
显示：块；
背景：白色；
字体大小：粗体；
}
#关于{
左边框：1px实心#D6D3D3；
}
#大约{
宽度：75px；
}
#成员a{
宽度：137px；
}
#会议a{
宽度：138px；
}
#酒吧{
宽度：142px；
}
#奖励a{
宽度：126px；
}
#职业a{
宽度：77px；
}
#教育a{
宽度：80px；
}
#全球a{
宽度：125px；
}
#MyLink a{
背景：#3399cc；
颜色：#f2f5eb；
宽度：85px；
边界权：无；
}
.about\u内容、.members\u内容、.meetings\u内容、.pubs\u内容、.awards\u内容、.careers\u内容、.education\u内容、.global\u内容、.MyLink\u内容
{ 
位置：绝对位置；
显示：无；
顶部：45px；
边框：1px实心#ff6633；
填充顶部：12px；
垫底：12px；
文本对齐：左对齐；
z指数：-1；
宽度：1024px；
边距：0-512px；
左：50%；
}
.关于内容a、.会员内容a、.会议内容a、.酒吧内容a、.奖项内容a、.职业内容a、.教育内容a、.全球内容a、.我的链接内容a{
文字装饰：无；
颜色：#ff6633；
填充：12px；
边际：0px；
}
#navmenu sot li:悬停。关于内容，
#导航菜单sot li:悬停。成员内容，
#导航菜单sot li：悬停。会议内容，
#navmenu sot li:悬停。酒吧内容，
#navmenu sot li:悬停。奖励内容，
#导航菜单sot li:悬停。内容，
#navmenu sot li:悬停。教育内容，
#导航菜单sot li:悬停。全局内容，
#导航菜单sot li:悬停.mylinks\u内容
{
显示：块；
}
#navmenu sot li:悬停。奖励内容，
#导航菜单sot li:悬停。内容，
#navmenu sot li:悬停。教育内容，
#导航菜单sot li:悬停。全局内容，
#导航菜单sot li:悬停.mylinks\u内容
{
文本对齐：右对齐；
}
.nav sot li分区a：悬停{
背景色：#ff6633；
颜色：#FFFFFF；
}

你以前没有问过同样/类似的问题吗？讽刺的是，我回答了这个问题，也被接受了。现在发生了什么？我解释了我上面关于这些问题相似性的推理，但为什么这篇帖子是独一无二的。我应该删除之前的问题吗？可能重复：@trevoray-你不必删除旧的o不，但是改写这个问题，不要让这个问题看起来和感觉像旧问题。否则它将被标记为重复。非常感谢！！很高兴有人愿意帮助我，尽管我之前有一个类似的问题。快速问题。z索引在那里，所以白色背景将“隐藏”顶部的橙色边框。但当我在我的开发站点上尝试此操作时，此z索引设置会导致二次滚动不“粘住”当鼠标悬停在上方时。有什么想法吗？z-index属性指定元素的堆栈顺序。堆栈顺序较高的元素总是位于堆栈顺序较低的元素之前。换句话说，某些元素可能使用类似的z-index，这可能会导致此问题，只需将其更改一下，看看您得到了什么

    #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;
    }