У меня есть сайт с меню и подменю под ним, мне нужно показать подменю второго уровня сразу после наведения на элемент подменю первого уровня, как мне этого добиться?
Я добавляю еще один UL под своим пунктом подменю, но он отображается под пунктом подменю, я пытался скрыть его, а затем показывать их при наведении, но он не появляется. Я не знаком с синтаксисом CSS, некоторая помощь будет оценена.
Спасибо
РЕДАКТИРОВАТЬ: теперь после добавления некоторых CSS, предложенных Tahir Iqbal, он показывает подменю второго уровня, но он показывает «один уровень» вниз, я прикреплю экран.
Вот скриншот
это мой код
.main-menu ul.navbar-nav li {
float: left;
position: relative;
}
.main-menu ul.navbar-nav > li >a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #444;
font-size: 13px;
font-weight: 500;
padding: 36px 0px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
margin: 0px 15px;
}
.main-menu ul.navbar-nav li a:hover{
color: #FFA100;
}
.main-menu ul.navbar-nav >li:hover > a:before, .main-menu ul.navbar-nav >li.active > a::before {
width: 100%;
}
.main-menu ul.navbar-nav li.active a:focus {
color: #333;
}
.main-menu ul.navbar-nav li.active a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #FFA100;
position: relative;
z-index: 9999999;
}
.navbar {
border: medium none;
margin-bottom: 0;
}
.navbar-default {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.main-menu ul.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background: none;
color:#333;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background: none;
}
.main-menu ul.nav li ul.sub-menu {
background: #fff;
border-top: 2px solid #FFA100;
left: 0;
opacity: 0;
position: absolute;
top: 115%;
transition: all 0.3s ease 0s;
visibility: hidden;
width: 220px;
z-index: -99;
}
.pagess {
position: relative;
}
.navbar.navbar-default {
float: right;
}
.main-menu ul.nav li ul.sub-menu li {
border-bottom: 1px solid #ddd;
padding: 0;
position: relative;
width: 100%;
}
.main-menu ul.nav li:hover ul.sub-menu {
top: 92%;
opacity: 1;
z-index: 999;
visibility: visible;
}
.main-menu ul.nav li ul.sub-menu li a {
color: #444;
display: block;
font-size: 12px;
font-weight: 500;
padding: 10px 15px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}
.main-menu ul.nav li:hover ul.sub-menu li a:hover{
color:#FFA100;
}
.main-menu ul.nav li ul.sub-menu li:last-child {
border:none;
}
.main-menu ul.sub-menu ul {
display: none;
position: absolute;
left: -100%;
top:0;
}
.main-menu ul.sub-menu li:hover > ul {
display: block;
left: 100%;
}
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="navbar-example">
<div class="main-menu">
<ul class="nav navbar-nav navbar-right">
<li><a class="pagess" href="index.html">Home</a>
<ul class="sub-menu">
<li><a href="index.html">Home 01</a>
<ul class="sub-menu">
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="index-2.html">Home 02</a>
<ul class="sub-menu">
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="index-3.html">Home 03</a></li>
<li><a href="index-4.html">Home 04</a>
<ul class="sub-menu">
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="index-5.html">Home 05</a></li>
<li><a href="index-6.html">Home 06</a></li>
</ul>
</li>
<li><a class="pagess" href="#">About us</a>
<ul class="sub-menu">
<li><a href="about.html">About us</a>
<ul class="sub-menu">
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="team.html">Team</a></li>
<li><a href="review.html">Review</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="error.html">Error</a></li>
</ul>
</li>
<li><a class="pagess" href="#">Services</a>
<ul class="sub-menu">
<li><a href="services.html">All Services</a></li>
<li><a href="service-details.html">Services Details</a></li>
<li><a href="service-details-2.html">Services Details 2</a></li>
<li><a href="service-fullwidth.html">Services Fullwidth</a></li>
</ul>
</li>
<li><a class="pagess" href="#">Projects</a>
<ul class="sub-menu">
<li><a href="project-2.html">Project 2 Column</a></li>
<li><a href="project-3.html">Project 3 Column</a></li>
<li><a href="project-4.html">Project 4 Column</a></li>
<li><a href="project-details.html">Project Details</a></li>
</ul>
</li>
<li><a class="pagess" href="#">Blog</a>
<ul class="sub-menu">
<li><a href="blog-grid.html">Blog grid</a></li>
<li><a href="blog-left-side.html">Blog Left Grid</a></li>
<li><a href="blog-right-side.html">Blog Right Grid</a></li>
<li><a href="blog-left-list.html">Blog Left list</a></li>
<li><a href="blog-right-list.html">Blog Right List</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="contact.html">contacts</a></li>
</ul>
</div>
</div>
</nav>