我实际上是HTML和CSS的新手我面临菜单问题。这个问题只发生在我在移动设备上打开但在桌面上完美运行时。
这里的问题是我在移动设备中检查这个问题时，只有子菜单级别1打开，当我点击子菜单级别1打开子菜单级别2时它会回滚。
#top-menu {
margin-bottom: 0;
border: 0;
border-radius: 0;
background: #ffffff;
height: auto;
color: #777777;
padding: 10px 0 2px 0;
border-top: 4px solid #33699e;
}
#top-menu.navbar { min-height: 35px !important }
#top-menu p.text-right span { margin-left: 15px }
a.logo.navbar-brand { color: #33699e }
.logo {
font-family: 'Arvo', serif;
font-weight: 0;
font-size: 27px;
text-transform: none;
letter-spacing: 1px;
margin: 15px 15px 25px 0;
margin-right: 40px;
border: 1px solid #33699e;
}
#top-menu .navbar-header small {
text-transform: uppercase;
font-weight: 700;
font-family: 'Raleway', sans-serif;
margin-top: -50px;
}
ul.top-links li { padding: 5px 0 }
.top-contact ol li {
margin-left: 20px;
font-weight: 900;
}
#main-menu {
margin-bottom: 0;
border: 0;
border-radius: 0;
background: linear-gradient(to bottom, #377cb7, #397db8);
min-height: 30px;
}
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#main-menu.stick {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.navbar-collapse { padding-left: 0 }
#main-menu .nav > li > a { padding: 10px 10px }
.navbar-default .navbar-toggle { border-color: #fff; background-color: #fff; }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: #ededed; }
.navbar-toggle {
/* float: none !important;*/
color: #3772ac;
}
.navbar-toggle i { text-align: center }
#main-menu i.fa.fa-bars { font-size: 10px }
#main-menu.navbar-default .navbar-brand:hover,
#main-menu.navbar-default .navbar-brand { color: #33699e }
.dropdown-menu > li > a,
#main-menu.navbar-default .navbar-nav > li > a {
font-family: 'Sintony', sans-serif;
color: #f1f1f1;
text-transform: none;
font-weight: 0;
letter-spacing: 0px;
}
#main-menu.navbar-default .navbar-nav > .active > a,
#main-menu.navbar-default .navbar-nav > .active > a:hover,
#main-menu.navbar-default .navbar-nav > .active > a:focus,
#main-menu.navbar-default .navbar-nav > li > a:hover,
#main-menu.navbar-default .navbar-nav > li > a:focus {
color: #33699e !important;
background-color: #dbdbdb;
border-color: #33699e;
}
#main-menu .navbar-nav > li > a {
padding-top: 13px;
padding-bottom: 14px;
border-top: 2px solid transparent;
margin-right: 10px;
transition: all 0.8s;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
text-align: center;
}
ol.social-icons li {
width: 25px;
height: 25px;
margin-left: 5px !important;
}
ol.social-icons li a:hover,
ol.social-icons li a:focus { color: #ffffff !important }
ol.social-icons li a {
color: #ffffff;
background: #33699e;
font-size: 16px;
border-radius: 50%;
padding: 4px 8px !important;
margin: 0px -6px !important;
}
ol.social-icons li:hover a { background: #33699e }
#main-menu .navbar-form {
padding: 10px 0 5px 0;
margin-top: 0;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
#main-menu .form-control {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-color: #656565;
background: transparent;
border-right-color: transparent;
color: #f1f1f1;
}
#main-menu .input-group-btn button.btn.btn-default {
background: transparent;
border-color: #656565;
color: #fff;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-left-color: transparent;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
color: #222 !important;
background-color: #FFFFFF;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus { background-color: transparent }
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 0;
margin: 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #33699e;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0;
border: 0;
border-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 12px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #f3f3f3;
white-space: nowrap;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="main-menu" class="navbar navbar-default">
<div class="col-md-3 col-sm-2"></div>
<div class="col-md-6 col-sm-8">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu">
<i class="fa fa-list-ul"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myMenu">
<ul class="nav navbar-nav navbar-left">
<li><a href="<?php echo site_url(); ?>/home_view/index">Home</a>
</li>
<li><a href="#about">About Me</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-submenu">
<a href="#">submenu level 1</a>
<ul class="dropdown-menu">
<li><a href="#">submenu level 2</a></li>
<li><a href="#">submenu level 2 </a></li>
<li><a href="#">submenu level 2 </a></li>
</ul>
</li>
</li>
</ul>
</li>
<li><a href="<?php echo site_url(); ?>/blog_view/index">Blog</a>
</li>
<li class="smoth-scroll"><a href="#contact">Reviews</a>
</li>
<li class="smoth-scroll"><a href="#contact">Contact Us</a>
</li>
<li><a href="<?php echo site_url(); ?>/home_view/sitemap">Site Map</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<div class="col-md-3 col-sm-2"></div>
<!-- /.container -->
</nav>
</body>
</html>
答案 0 :(得分：0)
希望这有用，您可以根据需要编辑样式。
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
if ($(window).width() > 768){
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
}.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 2</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 4.1</a></li>
<li><a href="#">Dropdown Submenu Link 4.2</a></li>
<li><a href="#">Dropdown Submenu Link 4.3</a></li>
<li><a href="#">Dropdown Submenu Link 4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>