如何調整每個菜單項（文本之間的分界線）之間的菜單分隔線？

Question

我無法確定如何調整此網頁上的水平菜單分隔線：amchaminternship.org/testimonials.html，因爲它需要與此網頁上的完全一樣：amchaminternship.org/faq.html。 Home之前的分隔符需要去除，每個分隔符之間的文本間隔需要均勻。

任何援助將不勝感激，謝謝你提前。

.menu { background: url(images/menu-tail.gif) repeat-x 0% 0%; 
 
     margin: 0; padding: 0; 
 
     width: 100%; 
 
     height: 43px; 
 
\t position: relative; 
 
\t z-index: 1; 
 
     top: 175px; 
 
\t right: 0; } /* reset your <ul>s */ 
 
     .menu-item { background: url(images/menu-divider.gif) no-repeat 0% 50%; 
 
     display: block; 
 
     line-height: 40px; 
 
\t float: left; 
 
     font-size: 1.083em; 
 
     position: relative; /* relative so the submenu position will work */ 
 
     margin: 0 20px; 
 
    } 
 
     .menu-submenu { 
 
\t  margin: 0; padding: 0; /* reset your <ul>s */ 
 
      position: absolute; 
 
      left: -9999em; top: -9999em; /* send it offscreen */ 
 
     } 
 
     .menu-item:hover > .menu-submenu { 
 
      left: auto; top: auto; /* bring it back onscreen on :hover */ 
 
     } 
 

 
      .menu-submenu-item { display: block; } 
 
    .menu:after { /* clearfix */ 
 
     content: ""; 
 
     display: table; 
 
     clear: both; 
 
    }

<ul class="menu"> 
 
    <p style="margin-top: 0pt; margin-bottom: 0pt;"></p> 
 
    <li class="menu-item"><a href="index.html">Home</a></li> 
 
    <li class="menu-item"><a 
 
href="internship_program.html">Internship Program</a> 
 
    <ul class="menu-submenu"> 
 
     <li class="menu-submenu-item"><a href="faq.html">FAQ</a></li> 
 
     <li class="menu-submenu-item"><a 
 
href="testimonials.html">Testimonials</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item"><a href="alumni.html">Alumni</a></li> 
 
    <li class="menu-item"><a href="donations.html">Donations</a></li> 
 
    <li class="menu-item"><a href="who_we_are.html">Who 
 
We Are</a></li> 
 
    <li class="menu-item"><a href="photo_gallery.html">Photo 
 
Gallery</a></li> 
 
    <li class="menu-item"><a href="contact_us.html">Contact 
 
Us</a></li> 
 
</ul> 
 
</div>

Answer 1

您可以從第一個菜單項刪除分隔背景是這樣的：

.menu-item:nth-of-type(1) { 
    background: none; 
} 

爲中心，它們之間2em的填充菜單項中添加這種風格：

padding: 0em 2em; 

而且，你不在menu-item上不需要相對定位。

代碼：

a { 
 
    color: white; 
 
} 
 

 
.menu { 
 
    background: url(http://amchaminternship.org/images/menu-tail.gif) repeat-x 0% 0%; 
 
    margin: 0; padding: 0; 
 
    width: 100%; 
 
    height: 43px; 
 
    position: relative; 
 
    z-index: 1; 
 
    top: 175px; 
 
    right: 0; 
 
} 
 

 
.menu-item { 
 
    background: url(http://amchaminternship.org/images/menu-divider.gif) no-repeat 0% 50%; 
 
    display: block; 
 
    line-height: 40px; 
 
    float: left; 
 
    font-size: 1.083em; 
 
    padding: 0em 2em; 
 
} 
 

 
.menu-item:nth-of-type(1) { 
 
    background: none; 
 
} 
 

 
.menu-submenu { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    left: -9999em; 
 
    top: -9999em; 
 
} 
 

 
.menu-item:hover > .menu-submenu { 
 
    left: auto; 
 
    top: auto; 
 
} 
 

 
.menu-submenu-item { 
 
    display: block; 
 
} 
 

 
.menu:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<ul class="menu"> 
 
    <p style="margin-top: 0pt; margin-bottom: 0pt;"></p> 
 
    <li class="menu-item"><a href="index.html">Home</a></li> 
 
    <li class="menu-item"><a href="internship_program.html">Internship Program</a> 
 
    <ul class="menu-submenu"> 
 
     <li class="menu-submenu-item"><a href="faq.html">FAQ</a></li> 
 
     <li class="menu-submenu-item"><a href="testimonials.html">Testimonials</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item"><a href="alumni.html">Alumni</a></li> 
 
    <li class="menu-item"><a href="donations.html">Donations</a></li> 
 
    <li class="menu-item"><a href="who_we_are.html">Who We Are</a></li> 
 
    <li class="menu-item"><a href="photo_gallery.html">Photo Gallery</a></li> 
 
    <li class="menu-item"><a href="contact_us.html">Contact Us</a></li> 
 
</ul>

Answer 2

你必須添加一個類爲沒有背景的第一個菜單項：

.menu-item.first { background: none } 

然後：

<li class="menu-item first"><a href="index.html">Home</a></li> 

PS：未測試:)