Question

这是我的HTML

<div class="menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#">Products</a></li>
        <ul>
            <li><a href="#">Chair</a></li>
            <li><a href="#">Table</a></li>
            <li><a href="#">Sofa</a></li>
        </ul>
  <li><a href="promotion.html">Promotion</a></li>
  <li><a href="staff.html">Our Staff</a></li>
</ul>
</div>

这是我的CSS

.menu {
    background-color: #007ead;
    width: 1000px;
    height: 51px;
    float: left;
}
.menu ul {
    list-style-type: none;
}
.menu ul li {
    display: inline;
}
.menu ul li a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 51px;
    color: #FFFFFF;
    text-decoration: none;
    padding-right: 25px;
    padding-left: 25px;
}
.menu ul li a:hover {
    list-style-type: none;
}

我试图在名为products的菜单下创建一个子菜单。有人能帮助我吗？

Answer 1

<强> DEMO

首先，您需要在ul标记之后的li内嵌套<a>才能生效。这是一个纯CSS的解决方案。没有JS需要:)）

   .menu {
    background-color: #007ead;
    width: 1000px;
    height: 51px;
    float: left;
}

.menu ul {
  list-style: none;
} 
.menu ul > li {
   float: left;
   position: relative;
   margin-right: 10px;
   color: #FFFFFF;   
}

.menu ul li a:link {
   color: #FFFFFF;
}

.menu ul > li ul {
     display: none;   
}

.menu ul > li:hover ul {
    display: block;

}

.menu ul > li ul {
   position: absolute;
  left: 0px;
  padding: 0px;
  background-color: #007ead;
  padding: 10px;
  color: white;
}



.menu ul > li ul li {
    float: left;
    display: inline-block;
}

.menu ul > li ul li a {
    color: white;
}

Answer 2

<div class="menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a class="subnav" href="#">Products</a>
     <ul>
           <li><a href="#">Chair</a></li>
           <li><a href="#">Table</a></li>
           <li><a href="#">Sofa</a></li>
      </ul>
  </li>
  <li><a href="promotion.html">Promotion</a></li>
  <li><a href="staff.html">Our Staff</a></li>
</ul>
</div>

.menu ul li ul {
    display:none;
}

然后使用jquery在父菜单上悬停显示和隐藏？

$(document).ready(function () {
    $('.subnav').hover(function () {
      $(this).children('ul').show();
    });
    $('.subnav').mouseOut(function () {
      $(this).children('ul').hide();
    });
});

没有经过测试，但沿着正确的路线，按照您的简短说明进行测试。

Answer 3

为

等子菜单应用css样式

.menu ul li ul li{
 display: inline;
 }

.menu ul li ul li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 51px;
color: #FFFFFF;
text-decoration: none;
padding-right: 25px;
padding-left: 25px;
}

您还可以点击此简单菜单链接点击here！

Answer 4

<div class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Chair</a></li>
                <li><a href="#">Table</a></li>
                <li><a href="#">Sofa</a></li>
            </ul>
        </li> <!-- End -->
        <li><a href="promotion.html">Promotion</a></li>
        <li><a href="staff.html">Our Staff</a></li>
    </ul>
</div>

Answer 5

<div class="menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a class="subnav" href="#">Products</a>
     <ul>
           <li><a href="#">Chair</a></li>
           <li><a href="#">Table</a></li>
           <li><a href="#">Sofa</a></li>
      </ul>
  </li>
  <li><a href="promotion.html">Promotion</a></li>
  <li><a href="staff.html">Our Staff</a></li>
</ul>
</div>

<style>    
.menu ul li ul {
        display:none;
    }
    .menu ul li ul:hover {
        display:block;
    }
</style>

创建子菜单

5 个答案: