如何「居中」這個可變寬度菜單的子元素？

Question

這裏有一個Codepen鏈接，顯示我有什麼至今： http://codepen.io/alih/pen/xijbm

編輯：這裏有一個新的Codepen鏈接，與列表項& ULS代替嵌套的div。我很歡迎有關如何在不出現額外標記的情況下提出建議，但我主要關心的是如何將下拉麪板居中對準達到其上方菜單的邊界。 http://codepen.io/alih/pen/KzsAc

---

我建立一個下拉菜單，具有以下特點：

• 多層次，但是下拉的只有一個級別。子列表將直接顯示在其父元素下面。
• 菜單的父級將是可變寬度的列表項
• 的下拉列表會對他們一個背景是永遠不變的寬度
• 的下拉列表將顯示爲「連接「連接到頂層菜單項左邊和右邊的帶有」繩索「的父元素。
• 這裏是我遇到的問題：下拉列表中的背景將以這些「繩索」爲中心。在Codepen演示中，這意味着綠色&灰色面板將以將面板「連接」到上述列表項目的邊框爲中心。

這個菜單需要儘可能早在IE7上工作，雖然我可能公然使用無關的div來達到我的目標，但我可能不會使用JavaScript（通常我會如何解決這個問題：減去寬度從下拉列表的寬度中選擇父項目，並向該下拉列表中添加該數量的負邊距）。

我想知道的是：有沒有什麼辦法可以單獨使用HTML & CSS？

我的CSS（編輯）：

.other { 
    float:left 
} 

ul#topnav, 
ul#topnav li, 
ul#topnav ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 


#topnavblock { 
    background:grey; 
    width:100%; 
    position:relative; 
    z-index:700; 
} 

#topnav { 
    z-index:2; 
} 

#topnav > li > a { 
    border-right: 1px solid #999; 
} 

#topnav li a:hover { 
    color: #444; 
    text-shadow: -1px -1px 1px #ffffff; 
} 

#topnav [class^="current"] { 
    background: lightyellow; 
} 


#topnav li a { 
    color: #893200; 
    text-decoration: none; 
    padding: 8px 25px 5px 25px; 
    text-align: center; 
    display: block; 
    text-shadow: 1px 1px 1px #ffffff; 
    font: bold 14px 'Arvo', serif; 
} 


#topnav [class^="current"] > a { 
    color: #FF6600; 
} 
#topnav [class^="current"] > a:hover { 
    color: #FF6600; 
} 

ul#topnav { 
position: relative; 
z-index: 597; 
float: left; 
left:20px; 
padding: 0; 
} 


ul#topnav > li { 
float: left; 
min-height: 1px; 
line-height: 1.3em; 
vertical-align: middle; 
} 

ul#topnav > li { 
padding:10px 0 14px 0; 
} 


ul#topnav li.hover, 
ul#topnav li:hover { 
position: relative; 
z-index: 599; 
cursor: default; 
} 

ul#topnav ul { 
visibility: hidden; 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 598; 
width: 100%; 
} 

ul#topnav li .navwrap1 { 
    background: yellow; 
    margin-top: -23px; 
    padding-top: 23px; 
    width: 210px; 
    position: relative; 
    top: 15px; 
} 

ul#topnav li .navwrap2 { 
    background:grey; 
    padding-bottom: 33px; 
} 

ul#topnav > li > ul { 
border-right: 3px solid grey; 
    margin-top: -11px; 
    margin-left: 0; 
padding-left: 0; 
} 

ul#topnav ul .navwrap3 { 
border-left:3px solid grey; 
padding-top:60px; 
} 

ul#topnav .navwrap2 li { 
float: none; 
background:lightgreen; 
width:100%; 
} 

ul#topnav ul ul { 
position:relative; 
top: 1px; 
left: 0; 
} 

ul#topnav ul li a { 
    padding: 10px 10px 10px 15px; 
} 

ul#topnav ul ul li a { 
    padding: 10px 5px 10px 20px; 
} 

ul#topnav ul ul ul li a { 
    padding-left:20px; 
} 

ul#topnav li:hover ul { 
visibility: visible; 
} 

我加價（簡寫，整個菜單可見在上面的CodePen鏈接）：

<div id="topnavblock"> 
<ul id="topnav"> 
<li><a href="#">Here is a menu item</a> 
<ul> 
    <li class="navwrap4"> 
    <ul class="navwrap3"> 
     <li class="navwrap1"> 
     <ul class="navwrap2"> 
      <li><a href="#">Menu item 1</a></li> 
      <li><a href="#">Another menu item of a different length</a> 
      <ul> 
       <li><a href="#">Sub-menu 2</a></li> 
       <li><a href="#">Sub-menu 2</a> 
       <ul> 
        <li>Third level nested menu</li> 
        <li>This also has a child of different length</li> 
       </ul> 
       </li> 
       <li><a href="#">Sub-menu 2</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Sub-menu 3</a></li> 
     </ul><!--end navwrap2--> 
     </li> <!--end navwrap1--> 
    </ul><!--end navwrap3--> 
    </li><!--end navwrap4--> 
</ul> 
</li> 
<li><a href="#">Item</a> 
<ul> 
    <li class="navwrap4"> 
    <ul class="navwrap3"> 
     <li class="navwrap1"> 
     <ul class="navwrap2"> 
      <li><a href="#">Sub-menu 3</a></li> 
      <li><a href="#">Sub-menu 3</a> 
      <ul> 
       <li><a href="#">Sub-menu 4</a></li> 
       <li><a href="#">Sub-menu 4</a></li> 
       <li><a href="#">Sub-menu 4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Sub-menu 3</a></li> 
     </ul><!--end navwrap2--> 
     </li> <!--end navwrap1--> 
    </ul><!--end navwrap3--> 
    </li><!--end navwrap4--> 
</ul> 
</li> 
</ul> 

Answer 1

對於ul#topnav li .navwrap1變化margin-top: -23px;至margin: -23px auto 0;。這將以該元素爲中心。