Question

我知道在子菜单标签上使用absoulte位置;但是，当我这样做时，它解决了问题，但只显示子菜单的最后一个条目。其他人似乎被吞没了。请帮忙！我的代码如下所示：

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #575768;
    }
    #topBar {
      background-color: #C9A26B;
      width: 100%;
      height: 70px;
      color: white;
      font-family: arial, helvetica, sans-serif;
    }
    .fixedwidth {
      width: 1500px;
      margin: 0 auto;
    }
    #logodiv {
      padding-top: 5px;
      float: left;
      border-right: #FFFFFF 1px solid;
      padding-right: 30px;
    }
    #signindiv {
      font-weight: bold;
      float: left;
      font-size: 1em;
      width: 90px;
      border-right: #FFFFFF 1px solid;
      padding: 25px 0 27px 20px;
    }
    #topmenudiv {
      padding-top: 20px;
    }
    /* Rules for Nav Menu ___________________________________ */
    #mainmenu,
    .submenu {
      list-style-type: none;
    }
    #mainmenu li {
      width: 185px;
      text-align: center;
      position: relative;
      float: left;
      margin-right: 4px;
    }
    #mainmenu ul li {} #mainmenu a {
      text-decoration: none;
      display: block;
      width: 185px;
      height: 40px;
      background-color: #5E5D5B;
      border: 1px solid #CCC;
      border-radius: 5px;
      color: #EE9A24;
    }
    #mainmenu .submenu a {
      margin-top: 2px;
    }
    #mainmenu li:hover > a {
      background-color: #CFC;
    }
    #mainmenu li:hover a:hover {
      background-color: #FFD8A4;
    }
    #mainmenu .submenu {
      display: none;
    }
    #mainmenu li:hover .submenu {
      display: block;
    }
    #meat {
      clear: both;
      padding-top: 20px;
    }
    footer {
      text-align: center;
      margin: 0 auto;
    }

<!doctype html>
<html>

<head>
  <title>ST-LLC About Us</title>

  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body>
  <div id="container">

    <div id="topBar">

      <div class="fixedwidth">

        <div id="logodiv">

          <img src="images/LLClogo.jpg" width="170px" />

        </div>

        <div id="signindiv">Sign In

        </div>

        <div id="topmenudiv">

          <ul id="mainmenu">
            <li><a href="#">About Us </a>
            </li>
            <li><a href="#"> Services </a>
              <ul class="submenu">
                <li><a href="#"> Project Management</a>
                </li>
                <li><a href="#"> Digital Content</a>
                </li>
              </ul>
            </li>
            <li><a href="#"> Projects </a>
              <ul class="submenu">
                <li><a href="#">Active Projects</a>
                </li>
                <li><a href="#">Closed Projects</a>
                </li>
              </ul>
            </li>
            <li><a href="#"> ST-LLC Publications </a>
              <ul class="submenu">
                <li><a href="#"> Recent Publications</a>
                </li>
                <li><a href="#"> Past Publications</a>
                </li>
              </ul>
            </li>
            <li><a href="#"> Request for Proposals (RFP) </a>
            </li>
            <li><a href="#"> Contacts </a>
            </li>
          </ul>
        </div>

        <div id="meat">



          <p>On June 6, 2004 the ASME Board of Governors (BOG) authorized</p>

Answer 1

在子菜单上试试这个

#mainmenu .submenu {
    display: none;
    position: absolute;
    top: 100%;
}

导航子菜单向下推动身体

1 个答案: