在菜單中放置css分隔線的問題

Question

我有一個CSS問題，一直無法解決。 基本上，我有一個固定寬度和高度的菜單。 菜單的背景只是一個圖形，帶有一個灰色的條，下面是一個陰影。 下面是該菜單的CSS：

  #menu
   {
       width:1024px;
       height:63px;
       background: url(../images/menuholder.jpg);
       margin:0px;
   }

我有一個CMS控制菜單選項，但是在此示例中，我對其進行了硬編碼。 我使用CSS將元素垂直放置在正確的位置，在灰色條上方，垂直居中，這很好。 這是問題所在：我試圖在每個菜單選項之間放置1px寬的白色（#fff）線。 我寧願完全通過CSS來做到這一點，而不是保存圖像。 我可以使用以下代碼來做到這一點：

<div id="menu">
            <div id="upperNavLinks">
            <ul>
              <li style="border-right: 1px solid #fff;"><a href="Option1.aspx" target="_self">Option 1</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option2.aspx" target="_self">Option 2</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option3.aspx" target="_self">Option 3</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option4.aspx" target="_self">Option 4</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option5.aspx" target="_self">Option 5</a></li>
            </ul>   
            </div>
         </div>

它背后的CSS是：

#upperNavLinks
{
    float:left;
    padding-top:0px;
    padding-left:0px;  
}

#upperNavLinks ul
{
    list-style-type:none; 
}

#upperNavLinks ul li
{
    float:left;
}

#upperNavLinks ul a {
    padding-right: 18px;
    padding-left: 18px;
    display: block;
    text-decoration: none;
    font-family:PT Sans, Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight:bold;
    color: #333333;
}

#upperNavLinks ul a:hover 
{
    font-weight:bold;
    color: #a31624;
}

問題是，它會在我想要的地方生成一條白線，但是我需要它從灰色條的頂部開始，一直向下到灰色條的底部，但不能在陰影上方。 灰色欄的大小（垂直）為：44像素。

因此，我的問題是：如何使白線鎖定到灰色條的頂部，並在灰色條上覆蓋44px（且不超過）垂直空間，同時將實際的菜單選項保留在中間圖形的像現在這樣？

如果這沒有任何意義，我可以將實際的圖形和代碼張貼在某個地方。

Answer 1

在每個帶有錨點的li之間，放置另一個li （現在帶有一個類）（我將其命名為border）。 給該類display: block; ， width: 1px; height: 20px; 現在，您可以發揮高度來獲得想要的效果。

http://jsfiddle.net/skeurentjes/4hJrb/1/

Answer 2

空置的語義含義是什么

的？ 我個人將背景圖片用於此類操作，而不是創建空標簽。