Question

您好我的垂直子菜单直接在父级水平菜单下对齐。我只希望子菜单在它们悬停时出现。我可能为自己复杂化了整个CSS。我们非常感谢任何帮助

这是HTML代码

<div id="nav_bar">
  <ul>
    <li><a href="index.php">Home</a> </li>
    <li> <a href="about_us.php">About Us</a>  </li>
    <li> <a href="training.php">Training</a>
      <ul>
      <li> <a href="funded_training.php">Funded Training</a></li>
      <li> <a href="traineeships.php">Traineeships</a></li>
      <li> <a href="fee_for_service.php">Fee for Service</a></li>
      <li> <a href="skill_sets.php">Enterprise Specific Skill Sets</a></li>
      <li> <a href="rpl.php">RPL Assessment</a></li>
      <li> <a href="international_training.php">International Training</a></li>
      </ul>
    </li>
    <li>
      <a href="employment.php">Employers</a>
      <ul>
      <li> <a href="existing_workers.php">Existing Workers</a></li>
      <li> <a href="new_workers.php">New Workers</a></li>
      </ul>
    </li>
    <li><a href="contact.php">Contact Us</a> </li>
    <li><a href="links.php">Links</a></li>
  </ul>
</div>

这是CSS

#nav_bar {
font-family: Verdana, Helvetica, Arial, sans-serif, serif;
font-size:1.2em;
font-weight:bold;
float: left;
height: 28px;
width: 689px;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 10px;}
#nav_bar ul {
list-style-type:none;
margin:0px;
padding:0px;
overflow:hidden;}

#nav_bar li a:link, #nav_bar li a:visited {
float:left;
color: #000;
text-decoration: none;
display:block;
width: 106px;
text-align:center;
padding: 4px;
}
#nav_bar li a:hover, #nav_bar li a:active {
color: #FFF;
background-color: #184B8D;
}
#nav_bar li ul {
display: none;
position:absolute;
}

#nav_bar li ul a:link, #nav_bar li ul a:visited {
color:#000;
text-decoration:none;
display:inline-block;
width:auto;
text-align:center;
padding:4px;
}
#nav_bar li ul a:hover, #nav_bar li ul a:active {
display:block;
position: absolute;
}
#nav_bar li:hover ul {
display:block;
clear:both;
}

Answer 1

嘿，我可以举一个例子，我可以参考：）

在子菜单中添加一个类并按如下方式应用样式

祝你好运（Y）

<h2>Dropdown menu example</h2>
<nav class="cf">
  <nav class="cf">
    <ul class="topmenu">
      <li><a href="home.htm" title="Home page" class="current">Home</a></li>
      <li><a href="products.htm" title="browse our products">Products</a>
        <ul class="submenu">
          <li><a href="laptops.htm" title="laptops">Laptops</a></li>
          <li><a href="tablets.htm" title="tablets">Tablets</a></li>
          <li><a href="phones.htm" title="smartphones">Smartphones</a></li>
          <li><a href="accessories.htm" title="accessories">Accessories</a></li>
        </ul>
      </li>
      <li><a href="blog.htm" title="read our blog">Blog</a>
        <ul class="submenu">
          <li><a href="recent.htm" title="recent articles">Recent articles</a></li>
          <li><a href="archive.htm" title="archives">Archives</a></li>
          <li><a href="hall.htm" title="favorite articles">Hall of fame</a></li>
        </ul>
      </li>
      <li><a href="about.htm" title="More about us">About</a></li>
      <li><a href="contact.htm" title="contact us">Contact</a>
        <ul class="submenu">
          <li><a href="service.htm" title="customer service">Customer service</a></li>
          <li><a href="register.htm" title="register for an account">Register</a></li>
          <li><a href="support.htm" title="technical support">Technical support</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</nav>

CSS

 /*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}
/*horizontal menu styles*/  
nav {
    background: #916A31;
    height: 2.3em;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
ul {
    background: #D5973C;
    height: 2em;
    width: 100%;
}
li {
    position: relative;
}
li a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    color: white;
    text-decoration: none;
}
li a:hover, .topmenu li:hover > a {
    background: #916A31;
    height: 2em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
}
.current, a:hover.current, .topmenu li:hover a.current {
    background: #AD9B7F;
    color: #eee;
    padding-top: .3em;
    border-radius: .3em .3em 0 0;
    position: relative;
    top: -.3em;
    border-bottom: .3em solid #917F63;
    cursor: default;
}
/*dropdown menu styles*/
ul.submenu {
    float: none;
    background: #916A31;
    width: auto;
    height: auto;
    position: absolute;
    top: 2em;
    left: -9000em;
    max-height: 0;
    -moz-transition:max-height 0.5s ease-in-out;
    -webkit-transition:max-height 0.5s ease-in-out;
    -o-transition:max-height 0.5s ease-in-out;
    transition:max-height 0.5s ease-in-out;
    overflow: hidden;
}
ul.submenu li {
    float: none;
}
.topmenu li:hover ul {
    left: 0;
    max-height: 10em;
}
ul.submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.submenu li:last-child a {
    border-bottom: none;
}
ul.submenu li a:hover {
    background: #D5973C;
    height: 2em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
}

无法在相应的水平导航下显示垂直子菜单

1 个答案: