0

请帮忙！我菜单中的所有内容都按我的意愿工作，除了这个问题。我的第三级嵌套列表项覆盖在第二级上，我无法修复它。我已经尝试了我能想到的一切，但我在这里用头撞砖墙。

如果有人可以看看这个代码示例并帮助找出我做错了什么，我们将不胜感激。

我真的不想从头开始，因为我喜欢菜单的外观和感觉。

这是我的代码：

/*navigation*/
nav.primary {
  width: 960px;
  height: 30px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  position: absolute;
  top: 123px;
  left: 50%;
  margin-left: -34.25em;
  border-bottom: #F26621 solid 3px;
  z-index: 9999;
}

nav.primary ul, nav.primary ul li { margin: 0px; }

nav.primary select { display: none; }

nav.primary ul li {
  display: block;
  float: left;
  position: relative;
}

nav.primary ul li a {
  display: block;
  line-height: 28px;
  padding: 0 25px;
  color: #444;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  background: none;
  letter-spacing: 0.06em;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
}

nav.primary ul li a:hover {
  background: #F26621;
  color: #FFF;
  cursor: pointer;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
}

/*sub menu*/
nav.primary ul li ul {
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 998;
  opacity: 0.6;
  max-height: 0px;
  overflow: hidden;
  width: auto;
  min-width: 188px;
  transition: max-height .25s ease-in-out .125s;
  -moz-transition: max-height .25s ease-in-out .125s;
  -webkit-transition: max-height .25s ease-in-out .125s;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

nav.primary ul li span { display: none; }

nav.primary ul li:hover ul {
  z-index: 999;
  height: auto;
  max-height: 200px;
  opacity: 1;
  transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

nav.primary ul ul li {
  display: block;
  float: left;
  width: auto;
  min-width: 188px;
  display: block;
  background: #F26621;
  border-bottom: 1px solid #999;
}

nav.primary ul ul li a {
  display: block;
  line-height: 32px;
  padding: 0 14px;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #FFF;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  transition: background .25s ease 0s;
  -moz-transition: background .25s ease 0s;
  -webkit-transition: background .25s ease 0s;
}

nav.primary ul ul li a:hover {
  background: #F98C58;
  border: none;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  transition: background .25s ease 0s;
  -moz-transition: background .25s ease 0s;
  -webkit-transition: background .25s ease 0s;
}

nav.primary ul li:hover > a {
  background: #F26621;
  color: #FFF;
}

/*third level menu*/
nav.primary ul ul li ul {
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 998;
  opacity: 0.6;
  max-height: 0px;
  overflow: visible;
  width: auto;
  min-width: 188px;
  transition: max-height .25s ease-in-out .125s;
  -moz-transition: max-height .25s ease-in-out .125s;
  -webkit-transition: max-height .25s ease-in-out .125s;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

nav.primary ul ul ul li {
  float: none;
  width: auto;
  display: block;
  background: #999;
  border-bottom: 1px solid #F26621;
}

nav.primary ul ul ul li a {
  display: block;
  width: auto;
  min-width: 188px;
  line-height: 32px;
  background: #999;
  padding: 0 14px 0 28px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #FFF;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  transition: background .25s ease 0s;
  -moz-transition: background .25s ease 0s;
  -webkit-transition: background .25s ease 0s;
}

nav.primary ul ul ul li a:hover {
  background: #F98C58;
  border: none;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  transition: background .25s ease 0s;
  -moz-transition: background .25s ease 0s;
  -webkit-transition: background .25s ease 0s;
}


<nav role="navigation" class="primary clearfix">

    <ul>

        <li class="selected">
            <a href="/zone/">Home</a>

        </li>

        <li>
            <a href="/zone/about-us.php">About Us</a>

    <ul>

        <li>
            <a href="/zone/management-team.php">Management Team</a>

        </li>

        <li>
            <a href="/zone/board-of-directors.php">Board of Directors</a>

        </li>

        <li>
            <a href="/zone/history.php">History</a>

        </li>

        <li>
            <a href="/zone/collaborations.php">Collaborations</a>

        </li>

        <li>
            <a href="/zone/business-development.php">Business Development</a>

        </li>

        <li>
            <a href="/zone/contact-us.php">Contact Us</a>

        </li>

    </ul>

        </li>

        <li>
            <a href="/zone/r-d.php">R &amp; D</a>

    <ul>

        <li>
            <a href="/zone/pipeline.php">Pipeline</a>

    <ul>

        <li>
            <a href="/zone/ampion.php">Ampion</a>

        </li>

        <li>
            <a href="/zone/optina.php">Optina</a>

        </li>

        <li>
            <a href="/zone/nce001.php">NCE001</a>

        </li>

    </ul>

        </li>

        <li>
            <a href="/zone/disease-education.php">Disease Education</a>

        </li>

        <li>
            <a href="/zone/non-core-assets.php">Non-core Assets</a>

        </li>

    </ul>

        </li>

        <li>
            <a href="/zone/newsroom/">Newsroom</a>

    <ul>

        <li>
            <a href="/zone/media.php">Media</a>

        </li>

    </ul>

        </li>

        <li>
            <a href="/zone/investor-relations.php">Investor Relations</a>

    <ul>

        <li>
            <a href="/zone/sec-filings.php">Sec Filings</a>

        </li>

        <li>
            <a href="/zone/corporate-governance.php">Corporate Governance</a>

        </li>

        <li>
            <a href="/zone/stock-information.php">Stock Information</a>

        </li>

        <li>
            <a href="/zone/events-presentations.php">Events &amp; Presentations</a>

        </li>

        <li>
            <a href="/zone/investor-faq.php">Investor FAQ</a>

        </li>

        <li>
            <a href="/zone/email-alerts.php">Email Alerts</a>

        </li>

    </ul>

        </li>

        <li>
            <a href="/zone/sitemap.php">Sitemap</a>

        </li>

    </ul>

    <select id="pageParentID" name="pageParentID" class="nav">
      <option value="" selected="selected">Go to...</option>


      <option value="/zone/">Home</option>



      <option value="/zone/about-us.php">About Us</option>



      <option value="/zone/management-team.php"> - Management Team</option>



      <option value="/zone/board-of-directors.php"> - Board of Directors</option>



      <option value="/zone/history.php"> - History</option>



      <option value="/zone/collaborations.php"> - Collaborations</option>



      <option value="/zone/business-development.php"> - Business Development</option>



      <option value="/zone/contact-us.php"> - Contact Us</option>



      <option value="/zone/r-d.php">R &amp; D</option>



      <option value="/zone/pipeline.php"> - Pipeline</option>



      <option value="/zone/ampion.php"> - Ampion</option>



      <option value="/zone/optina.php"> - Optina</option>



      <option value="/zone/nce001.php"> - NCE001</option>



      <option value="/zone/disease-education.php"> - Disease Education</option>



      <option value="/zone/non-core-assets.php"> - Non-core Assets</option>



      <option value="/zone/newsroom/">Newsroom</option>



      <option value="/zone/media.php"> - Media</option>



      <option value="/zone/investor-relations.php">Investor Relations</option>



      <option value="/zone/sec-filings.php"> - Sec Filings</option>



      <option value="/zone/corporate-governance.php"> - Corporate Governance</option>



      <option value="/zone/stock-information.php"> - Stock Information</option>



      <option value="/zone/events-presentations.php"> - Events &amp; Presentations</option>



      <option value="/zone/investor-faq.php"> - Investor FAQ</option>



      <option value="/zone/email-alerts.php"> - Email Alerts</option>



      <option value="/zone/sitemap.php">Sitemap</option>



    </select>
      </nav>
4

1 回答 1

0

我已经得到了它的大部分方式。您遇到的主要问题是您需要设置

display: none;

到第三级导航。

工作变化在这个小提琴中

于 2013-11-07T23:04:04.400 回答