多级菜单没有响应？

Question

我有一个在桌面上运行良好的多级菜单，但是没有为小型设备提供设备，因此菜单只是遍布整个地方。我看了很多例子，但似乎无法继续编码。

我熟悉媒体查询，但只需要一个起点或一些指导，这样我就可以继续使用网站的其他部分了。如果可能的话，我希望子菜单在悬停时打开。

非常感谢

HTML

<div class="menu">
  <ul class="navigation">
    <li><a href="/domain/admin/index.php" title="Home">Home</a></li>
    <li><a href="/domain/admin/test.php" title="Requests">Requests</a>
      <ul>
        <li><a href="javascript:void(0);" title="Boxes">Boxes</a>
          <ul>
            <li><a href="javascript:void(0);" title="Add">Add Box(es)</a></li>
            <li><a href="javascript:void(0);" title="Retrievals">Retrievals</a></li>
            <li><a href="javascript:void(0);" title="Returns">Returns</a></li>
            <li><a href="javascript:void(0);" title="Destructions">Destructions</a></li>
            <li><a href="javascript:void(0);" title="Permanent Retrieval">Permanent Retrieval</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);" title="Files">Files</a>
          <ul>
            <li><a href="javascript:void(0);" title="Add">Add File(s)</a></li>
            <li><a href="javascript:void(0);" title="Retrievals">Retrievals</a></li>
            <li><a href="javascript:void(0);" title="Returns">Returns</a></li>
            <li><a href="javascript:void(0);" title="Destructions">Destructions</a></li>
            <li><a href="javascript:void(0);" title="Permanent File Retrieval">Permanent File Retrieval</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);" title="Recycle Collection">Recycle Collection</a>
          <ul>
            <li><a href="javascript:void(0);" title="Sacks">Sacks</a></li>
            <li><a href="javascript:void(0);" title="Boxes">Boxes</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);" title="Box Supply">Box Supply</a></li>
        <li><a href="javascript:void(0);" title="Sack Supply">Sack Supply</a></li>
      </ul>
    </li>
    <li><a href="javascript:void(0);" title="Reports">Reports</a></li>
    <li><a href="javascript:void(0);" title="Invoices">Invoices</a></li>
    <li><a href="/domain/admin/cp.php" title="Control Panel">Control Panel</a></li>
    <li><a href="/domain/admin/logout.php" title="Logout Here">Logout</a></li>

  </ul>
  <div class="clear"></div>
</div>

CSS

.menu {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  background: #073648;
  position: static;
}

.navigation {
  list-style: none;
  padding: 0;
  margin: 0 0 0 16px;
  background: rgb(58, 58, 58);
  font-size: 16px;
}

.navigation li {
  float: left;
}

.navigation li:hover {
  background: #1a4655;
}

.navigation li:first-child {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 0 0 5px;
}

.navigation li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.navigation ul {
  display: none;
  position: absolute;
  list-style: none;

  padding: 0;
}

.navigation ul ul {
  left: 100%;
  top: 0;

}

.navigation ul li {
  float: none;
  position: relative;
}

.navigation li:hover>ul {
  display: block;
  background: #1a4655;
  /*          border: solid 3px #fff;*/
  border-top: 0;
/*
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
*/
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  position: absolute;
  width: 250px;
}

.navigation li:hover>ul li:hover {
  -webkit-border-radius: 0 0 5px 5px;
/*  border-radius: 0 0 5px 5px;*/
}

.navigation li li a:hover {
  background: #0c323f;
  color: white;
}

.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
/*
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
*/
}

Answer 1

初学者构建响应式网站的最简单方法是使用像Bootstrap这样的框架。

这个框架的新版本Bootstrap 4非常棒。

以下是工作导航的完整响应式代码示例，其中包含一个可以转换为多级下拉列表的下拉列表：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .navbar-collapse .navbar-nav .dropdown .dropdown-menu{
        margin-left: 0px !important;
        margin-top: 0px !important;
    }
    .dropdown-submenu {
        position: relative;
    }
    .dropdown-submenu a::after {
        transform: rotate(-90deg);
        position: absolute;
        right: 6px;
        top: .8em;
        transition: all 0.3s ease-in-out 0s;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }
    .dropdown:hover>.dropdown-menu{
        display: block;
    }
    .dropdown-submenu:hover>.dropdown-menu{
        display: block;
    }
    @media only screen and (max-width: 991px) {
        .dropdown-submenu a::after {
            transform: rotate(-90deg);
            position: absolute;
            right: 6px;
            top: .8em;
            transition: all 0.3s ease-in-out 0s;
        }
    }
    .submenuNav{
        opacity: 0.8;
        margin-right: 3px;
    }
    .submenuNav:hover{
        opacity: 1;
        transform: translateX(3px);
        transition: 0.4s all ease;
        margin-right: 0px;
    }
    .dropdown-item{
        background-color: none !important;
        color: #007bff;
        opacity: 0.8;
    }
    .dropdown-item:hover{
        background-color: none !important;
        color: #007bff;
        opacity: 1;
        transition: 0.2s all ease;
    }
    .customNav{
        background-color: none !important;
        color:#007bff !important;
    }
    .navbar .navbar-toggler .navbar-toggler-icon{
        background-color: #007bff;
    }
    
    .dropdown-submenu a:active { 
        background-color: white;
    }
</style>

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <!-- Trekking In Nepal -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Trekking in Nepal
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Annapurna Region</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item submenuNav " href="#">Annapurna Circuit</a>
                            </li>
                            <li>
                                <a class="dropdown-item submenuNav " href="#"> Annapurna Base Camp</a>
                            </li>
                            <li>
                                <a class="dropdown-item submenuNav " href="#"> Upper Mustang</a>
                            </li>
                        </ul>
                    </li>

                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Everest Region</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item submenuNav " href="#">Everest Base Camp</a>
                            </li>
                            <li>
                                <a class="dropdown-item submenuNav " href="#"> Jiri to Everest Base Camp</a>
                            </li>
                            <li>
                                <a class="dropdown-item submenuNav " href="#"> Everest Three Pass</a>
                            </li>
                        </ul>
                    </li>

                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Langtang Region</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item submenuNav " href="#">Langtang Helambu</a>
                            </li>
                            <li>
                                <a class="dropdown-item submenuNav " href="#"> Langtang Gosaikunda Lake</a>
                            </li>
                            <li>
                                <a class="dropdown-item submenuNav " href="#">Langtang Valley</a>
                            </li>
                        </ul>
                    </li>

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

更多信息：

https://getbootstrap.com/docs/4.0/components/navbar/