Question

我无法弄清楚如何调整此网页上的水平菜单分隔符：amchaminternship.org/testimonials.html，因为它需要与此网页完全相同：amchaminternship.org/faq.html。 Home之前的分隔符需要去，每个分隔符之间的文本间距需要均匀。

非常感谢任何帮助，谢谢你。

＆＃13;

.menu { background: url(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; } /* reset your <ul>s */
        .menu-item { background: url(images/menu-divider.gif) no-repeat 0% 50%;
        display: block;
        line-height: 40px;
	float: left;
        font-size: 1.083em;
        position: relative; /* relative so the submenu position will work */
        margin: 0 20px;
    }
        .menu-submenu {
	    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;
    }

＆＃13;

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

＆＃13;

Answer 1

您必须为没有背景的第一个菜单项添加一个类：

.menu-item.first { background: none }

然后：

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

PS：未经测试：）

Answer 2

您可以从第一个菜单项中删除分隔符背景，如下所示：

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

如何调整每个菜单项之间的菜单分隔符（文本之间的分界线）？

2 个答案: