Question

给定的html脚本在主菜单下创建一个层次结构。我想实现一个悬停，这样当我将光标放在主菜单上时，会出现底部的三个字段。请帮助和感谢。

<li class="linkCMSListMenuLI" style=""><a 
href="/Inv/Fs.aspx" 
class="linkCMS" style="" >Main Menu</a>

<ul>
   <li><a href="#">Menu 2.1</a></li>
   <li><a href="#">Menu 2.2</a></li>
   <li><a href="#">Menu 2.3</a></li>
   </ul>
   </li>

Answer 1

＆＃13;

li>ul{
  display: none;
}
li:hover>ul{
  display: block;
}

＆＃13;

<li><a>Main Menu</a>
  <ul>
    <li><a href="#">Menu 2.1</a>
        <ul>
           <li><a href="#">Menu 2.1.1</a></li>
           <li><a href="#">Menu 2.1.2</a></li>
           <li><a href="#">Menu 2.1.3</a></li>
       </ul>
     </li>
     <li><a href="#">Menu 2.2</a></li>
     <li><a href="#">Menu 2.3</a></li>
     </ul>
</li>

＆＃13;

Answer 2

实现此效果的最佳和最简单的方法是使用bootstrap，你可以使用可折叠列表，手风琴等，请看这个链接 https://www.w3schools.com/bootstrap/bootstrap_collapse.asp 否则你应该编写自己的jQuery函数。

Answer 3

使用纯css解决方案。

.nav {
  padding: 0;
}

.nav li {
  display: inline-block;
  position: relative;
}

.sub-nav {
  display: none;
  position: absolute;
  top: 100%;
}

.nav li:hover .sub-nav {
  display: inline-block;
}

<nav>
  <ul class="nav">
    <li> main 1
      <ul class="sub-nav">
        <li>1</li>
        <li>2</li>
        <li>2</li>
      </ul>
    </li>
    <li> main 2
      <ul class="sub-nav">
        <li>1</li>
        <li>2</li>
        <li>2</li>
      </ul>
    </li>
    <li> main 3
      <ul class="sub-nav">
        <li>1</li>
        <li>2</li>
        <li>2</li>
      </ul>
    </li>
    <ul>
</nav>

在html中显示层次结构基于悬停

3 个答案: