我正在定制css和html来设计网站。我不能在导航栏菜单中创建子子菜单。就像我希望在主菜单中将“服务”作为选项,然后将“打印介质”作为“服务”的子菜单,然后将“ Option1”,“ Option2”,“ Option3”,“ Option4”作为子菜单“印刷媒体”
结构应如下所示:
Services->PrintMedia->Option1;
->Option2;
->Option3;
->Option4;
Services->ElectronicMedia->Option5;
->Option6;
->Option7;
->Option7;
我想让它响应。
我已经尝试了许多可能的方法,但是由于我的自定义CSS,我无法按原样实现代码。
<div class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<h1><img src="images/press-monitor.png" alt="Press Monitor" width="40%" height="auto"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a href="#">Pages <i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="aboutus.html">About</a></li>
<li><a href="aboutus2.html">About 2</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="contact2.html">Contact us 2</a></li>
<li><a href="404.html">404 error</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
<li class="dropdown"><a href="blog.html">Blog <i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="blog.html">Blog Default</a></li>
<li><a href="blogtwo.html">Timeline Blog</a></li>
<li><a href="blogone.html">2 Columns + Right Sidebar</a></li>
<li><a href="blogthree.html">1 Column + Left Sidebar</a></li>
<li><a href="blogfour.html">Blog Masonary</a></li>
<li><a href="blogdetails.html">Blog Details</a></li>
</ul>
</li>
<li class="dropdown"><a href="portfolio.html">Portfolio <i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="portfolio.html">Portfolio Default</a></li>
<li><a href="portfoliofour.html">Isotope 3 Columns + Right Sidebar</a></li>
<li><a href="portfolioone.html">3 Columns + Right Sidebar</a></li>
<li><a href="portfoliotwo.html">3 Columns + Left Sidebar</a></li>
<li><a href="portfoliothree.html">2 Columns</a></li>
<li><a href="portfolio-details.html">Portfolio Details</a></li>
</ul>
</li>
<li><a href="shortcodes.html ">Shortcodes</a></li>
</ul>
</div>
<div class="search">
<form role="form">
<i class="fa fa-search black"></i>
<div class="field-toggle">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
</div>
</form>
</div>
</div>
</div>
的CSS
/* 下拉式菜单*/
ul.sub-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
}
#header .navbar-nav li ul.sub-menu li a{
color: #818285;
padding: 5px 0;
font-size: 13px;
display: block;
text-transform: capitalize;
}
#header .navbar-nav li ul.sub-menu li .active{
background: #00aeef;
color: #fff;
position: relative;
}
#header .navbar-nav li ul.sub-menu li .active i{
position: absolute;
font-size: 56px;
top: -13px;
color: #0884d5;
}
#header .navbar-nav li ul.sub-menu li .active .fa-angle-right{
left: -3px;
}
#header .navbar-nav li ul.sub-menu li .active .fa-angle-left{
right: -3px;
}
#header .navbar-nav li ul.sub-menu li a:hover,
#header .navbar-nav li ul.sub-menu li a:focus{
background: #c80000 ;
color: #fff;
}
这是为了使其响应
@media only screen and (min-width: 768px) {
.nav.navbar-nav>li:hover>ul.sub-menu {
display: block;
-webkit-animation: fadeInUp 400ms;
animation: fadeInUp 400ms;
}
.nav.navbar-nav>li:hover>ul.sub-sub-menu {
display: block;
-webkit-animation: fadeInUp 400ms;
animation: fadeInUp 400ms;
}
ul.sub-menu {
position: absolute;
top: 60px;
left: 0;
background: #fff;
padding: 10px 0;
width: 240px;
-webkit-box-shadow: none;
box-shadow: none;
display: none;
z-index: 999;
border: 1px solid #c80000;
}
ul.sub-sub-menu {
position: absolute;
top: 60px;
left: 60px;
background: #fff;
padding: 10px 0;
width: 240px;
-webkit-box-shadow: none;
box-shadow: none;
display: none;
z-index: 999;
border: 1px solid #c80000;
}
#header .navbar-nav li ul.sub-menu li a {
padding-left: 20px;
}
}
Services->PrintMedia->Option1;
->Option2;
->Option3;
->Option4;
Services->ElectronicMedia->Option5;
->Option6;
->Option7;
->Option7;
根据我的理解,您正在寻找嵌套子菜单。如果是,以下是相同的解决方案。来源Skelly Codeply
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: -10rem;
/* 10rem is the min-width of dropdown-menu */
margin-top: -6px;
}
/* rotate caret on hover */
.dropdown-menu>li>a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand pb-2" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu wider text</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu</a></li>
<li><a class="dropdown-item" href="#">Submenu0</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
我非常感谢您的帮助Manjo。但是,由于我共享了所有代码,我希望有人可以在我的代码中进行编辑,因为我无法在当前代码中实现更改。如果您准备帮助我,我可以与您共享整个CSS和HTML文件。