我有一个在桌面上运行良好的多级菜单，但没有为小型设备提供的功能，因此菜单到处都是。我看过很多示例，但似乎无法继续编写此代码。
我熟悉媒体查询，但只需要一个起点或一些指导，以便我可以继续浏览网站的其余部分。如果可能，我希望子菜单在悬停时打开。
非常感谢
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;
*/
}
最佳答案
初学者构建响应式网站的最简单方法是使用像 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>更多信息:
关于html - 多级菜单无响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48484997/