Cannot Hide Submenu on Bootstrap 3x - html

Question

I'm new in website development. I have some problem that I cant's solve myself. for your information I'have used template from Zerotheme. Here the link you can download to view the full source code.
Q > How to hide the second level because I want to use "Hover" on the Submenu.
Screenshot
Can someone help me to solve this.
#menu {
border-radius: 0;
text-transform: uppercase;
background: #fff;
}
body.sub-page #menu {
padding: 10px 0;
}
#menu.navbar {
margin: 0;
min-height: auto
}
#menu #heading {
float: left;
padding-left: 15px;
font-size: 20px;
font-weight: 700;
line-height: 40px;
color: #fff;
margin-top: 10px;
text-transform: uppercase;
}
#menu .navbar-brand {
margin: 0;
height: auto;
padding: 0px 18px;
}
#menu .navbar-brand img {
max-width: 160px;
}
#menu .logo {}
#menu .dropdown-menu {
background-color: #EDD9C0;
border: none;
border-radius: 0;
}
#menu ul.nav .dropdown-menu li a {
color: #1a1c1e;
}
#menu ul.nav .dropdown-menu li a:hover {}
#menu .dropdown-inner {
display: table;
}
#menu .dropdown-inner ul {
display: table-cell;
}
#menu .dropdown-inner a {
min-width: 160px;
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #000;
margin: 0 5px;
}
#menu li.dropdown:hover>a,
#menu li.dropdown:focus>a,
#menu li.dropdown:active>a {
color: #3B3A36;
background: none;
}
#menu ul.nav li {
padding-right: 16px;
}
#menu ul.nav li a {
padding: 8px 10px;
color: #333;
font-size: 14px;
font-weight: bold;
}
#menu ul.nav li.dropdown a {}
#menu .nav>li>a:hover,
#menu .nav>li>a:focus {
color: #3B3A36;
background: none;
}
#menu .btn-navbar {
font-size: 20px;
color: #FFF;
padding: 5px 15px;
float: right;
border: 3px solid #fff;
}
#media (min-width: 768px) {
#menu ul.nav.navbar-nav {
margin-top: 5px;
display: inline-block;
float: none;
}
#menu .dropdown:hover .dropdown-menu {
display: block;
}
#menu .navbar-collapse {
text-align: center;
}
body.sub-page #menu ul.nav.navbar-nav {
margin-top: 5px;
display: block;
float: right;
}
}
#media(max-width:767px) {
#menu {
background: #1D2027;
padding: 10px 0;
}
#menu .navbar-brand {
display: block;
color: #fff;
margin-top: 10px;
}
#menu div.dropdown-inner>ul.list-unstyled {
display: block;
}
#menu .dropdown-inner a {
width: 100%;
color: #fff;
}
#menu div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
#menu ul.nav li a {
color: #fff;
}
#menu ul.nav li a:hover {
color: #EDD9C0;
}
#menu ul.nav li.dropdown a {
color: #fff;
}
}
.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: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: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.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;
}
<!--Navigation-->
<nav id="menu" class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<span id="heading" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i
class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li class="dropdown">Category <i class="fa fa-chevron-down"></i>
<div class="dropdown-menu">
<div class="dropdown-inner">
<ul class="list-unstyled">
<li>Text 301</li>
<li>Text 302</li>
<li>Text 303</li>
<li>Text 304</li>
<li>Text 305</li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">Text 314</a>
<ul class="dropdown-menu">
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>

Answer 1

First of all change css of
#menu .dropdown:hover .dropdown-menu {display: block;}
to
#menu .dropdown:hover>.dropdown-menu {display: block;}
because on hover of dropdown show both dropdown-menu and remove
#menu .dropdown-inner {display: table;}
#menu .dropdown-inner ul {display: table-cell;}
because its override display:none without hover
#menu {border-radius: 0;text-transform: uppercase;background: #fff;}
body.sub-page #menu {padding: 10px 0;}
#menu.navbar{margin: 0;min-height:auto}
#menu #heading {float: left;padding-left: 15px;font-size: 20px;font-weight: 700;line-height: 40px;color: #fff;margin-top: 10px;text-transform: uppercase;}
#menu .navbar-brand{margin: 0;height: auto;padding: 0px 18px;}
#menu .navbar-brand img{max-width: 160px;}
#menu .logo {}
#menu .dropdown-menu {background-color: #EDD9C0;border:none;border-radius: 0;}
#menu ul.nav .dropdown-menu li a{color: #1a1c1e;}
#menu ul.nav .dropdown-menu li a:hover{}
#menu .dropdown-inner a {min-width: 160px;display: block;padding: 3px 20px;clear: both;line-height: 20px;color: #000;margin: 0 5px;}
#menu li.dropdown:hover>a, #menu li.dropdown:focus>a, #menu li.dropdown:active>a{color: #3B3A36;background: none;}
#menu ul.nav li{padding-right: 16px;}
#menu ul.nav li a{padding: 8px 10px;color: #333;font-size: 14px;font-weight: bold;}
#menu ul.nav li.dropdown a{}
#menu .nav > li > a:hover, #menu .nav > li > a:focus{color:#3B3A36;background: none;}
#menu .btn-navbar {font-size: 20px;color: #FFF;padding: 5px 15px;float: right;border: 3px solid #fff;}
#media (min-width: 768px) {
#menu ul.nav.navbar-nav {margin-top: 5px;display: inline-block;float: none;}
#menu .dropdown:hover>.dropdown-menu {display: block;}
#menu .navbar-collapse {text-align: center;}
body.sub-page #menu ul.nav.navbar-nav {margin-top: 5px;display: block;float: right;}
}
#media(max-width:767px) {
#menu{background: #1D2027;padding: 10px 0;}
#menu .navbar-brand {display: block;color: #fff;margin-top: 10px;}
#menu div.dropdown-inner > ul.list-unstyled {display: block;}
#menu .dropdown-inner a {width: 100%;color: #fff;}
#menu div.dropdown-menu {margin-left: 0 !important; padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.1);}
#menu ul.nav li a{color: #fff;}
#menu ul.nav li a:hover{color: #EDD9C0;}
#menu ul.nav li.dropdown a{color: #fff;}
}
.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: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:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.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;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Navigation-->
<nav id="menu" class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<span id="heading" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li class="dropdown">Category <i class="fa fa-chevron-down"></i>
<div class="dropdown-menu">
<div class="dropdown-inner">
<ul class="list-unstyled">
<li>Text 301</li>
<li>Text 302</li>
<li>Text 303</li>
<li>Text 304</li>
<li>Text 305</li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">Text 314</a>
<ul class="dropdown-menu">
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>