Question

在“实习计划”菜单下，我试图添加“FAQ”和“Testimonials”作为横向下拉子菜单，但是，因为我不是CSS的专家，我似乎无法制作子-menu工作正常。

以下是该网站的链接：http://amchaminternship.org/testimonials.html

任何帮助将不胜感激，谢谢你。

#menu {
  background: url(images/menu-tail.gif) repeat-x 0% 0%;
  width: 100%;
  height: 43px;
  overflow: hidden;
  position: absolute;
  z-index: 1000;
  top: 175px;
  right: 0;
}
#menu li a {
  float: left;
  position: relative;
  display: block;
  border: none;
}
#menu li:hover a {
  display: block;
}
#menu ul {
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1000;
}
#menu ul li a {
  display: block;
  height: 43px;
  padding: 0 29px 0 29px;
  float: left;
  line-height: 40px;
  text-decoration: none;
  color: #fff;
}
#menu ul li:hover a {
  color: #ffcc39;
}

<div id="header" class="internship">
  <div class="inner">
    <a href="index.html">
      <img src="images/logo.jpg" id="logo" alt="">
    </a>
    <div id="menu">
      <p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
      <div>
        <ul style="margin-bottom: 0pt;">
          <li><a href="index.html" id="index">Home</a>
          </li>
          <li><a href="internship_program.html">Internship
Program</a>
            <ul>
              <li><a href="testimonials.html">Testimonials</a>
              </li>
              <li><a href="faq.html">FAQ</a>
              </li>
            </ul>
          </li>
          <li><a href="alumni.html">Alumni</a> 
          </li>
          <li><a href="donations.html">Donations</a> 
          </li>
          <li><a href="who_we_are.html">Who We Are</a>
          </li>
          <li><a href="photo_gallery.html">Photo Gallery</a>
          </li>
          <li><a href="contact_us.html">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="info-box">
      <img src="images/sb_home.jpg" alt="Flags" height="297" width="234">
    </div>
  </div>

Answer 1

浏览你的DOM和CSS是有点挑战性的，所以让我回答一下我将如何做到这一点并从中收集你的意思：

.menu { margin: 0; padding: 0; } /* reset your <ul>s */
    .menu-item {
        display: block;
        float: left;
        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;
    }

<ul class="menu">
    <li class="menu-item">
        <a href="#">Link</a>
        <ul class="menu-submenu">
            <li class="menu-submenu-item"><a href="#">SubLink</a></li>
            <li class="menu-submenu-item"><a href="#">SubLink</a></li>
            <li class="menu-submenu-item"><a href="#">SubLink</a></li>
        </ul>
    </li>
    <li class="menu-item"><a href="#">Link</a></li>
    <li class="menu-item"><a href="#">Link</a></li>
</ul>

如何添加水平下拉子菜单而不重叠，或隐藏在横幅后面？

1 个答案: