html - 我创建了一个小的下拉菜单，我在那里有一些类(class)，当我选择初级类(class)时，我想看到 1、2、3、4、5 年级-6ren

html - 我创建了一个小的下拉菜单，我在那里有一些类(class)，当我选择初级类(class)时，我想看到 1、2、3、4、5 年级

转载作者：太空宇宙更新时间：2023-11-04 09:39:04

我创建了一个小的下拉菜单，其中有我想在选择初级类时看到 1、2、3、4、5 年级的类(class)。我该怎么做我已经在此处实现了一些部分我已经附上 css 和我的代码

body{
    font-family: arial, sans-serif;

    /*text-align: center;*/
}
ul{
    margin:0px; padding:0px;
    list-style-type:none;
}
ul li a{
    text-decoration:none;
    color:white;
    display:block;
}
ul li {
    float:left;
    width:150px;
    height:40px;
    background-color:black;
    font-size:20px;
    line-height:50px;
    opacity:.8;
    border:1px solid;
}

ul li a:hover{
    background-color:orange;

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





<body>
<nav>
    <div>
        <ul>
            <li><a href="#"> Home </a></li>
            <li><a href="#"> Classes</a>
            <ul>
             <li><a href="#">Primary School</a>
                    </ul>
                    </li>       
            <li><a href="#"> About</a></li>
            <li><a href="#"> Contact</a></li>

        </ul>
        </li>
        </div>
    </nav>

</body>
</html>

最佳答案

我建议为此使用 Bootstrap 。它专为移动优先网站而设计。

您可以在这里阅读:http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

多级下拉列表:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>


<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>