我希望将鼠标悬停在该子菜单项上后在右侧显示另一个（二级）子菜单

Question

我的网站下有菜单和子菜单，我需要在将鼠标悬停在一级子菜单项上后立即显示二级子菜单，我该如何实现？我在我的子菜单项下添加了另一个 UL 但在子菜单项下显示了这个，我试图隐藏它而不是用悬停显示它们但它没有出现。我不熟悉 CSS 语法，一些帮助将不胜感激。谢谢

编辑：现在在添加 Tahir Iqbal 建议的一些 css 之后，它显示二级子菜单，但它显示 "one level" 向下，我将附上屏幕。 Here is the screenshot

这是我的代码

.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>

Answer 1

这就是我为您所做的，希望对您有所帮助

  .main-menu ul.navbar-nav li {
    float: left;
    position: relative;
margin:0;
transition:background .17s
}
.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: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;
}
.navbar {
    border: medium none;
    margin-bottom: 0;
}
.navbar-default {
  background: rgba(0, 0, 0, 0.13) 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;
    right: 0;
    float: right;
    margin-top: 0;
    padding: 0;
    opacity: 0;
    position: absolute;
    top: 115%;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 300px;
    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;
    height: 36px;
    font-size: 11px;
    font-weight: 500;
    padding: 10px 15px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all .17s ease;
    line-height: 36px;
    box-sizing: border-box;
    margin: 0;
}
.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;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.main-menu ul > li > ul > li {
    display: block;
}
.main-menu #main-menu-nav > li > a{
text-transform:uppercase;
font-weight:700
}
.main-menu .sub-menu li > ul {
    position: absolute;
    float: right;
    right: 300px;
    top: -2px;
    width: 180px;
    background-color: #fff;
    z-index: 99999;
    margin-top: 0;
    padding: 0;
    border-top: 2px solid #FFA100;
    visibility: hidden;
    opacity: 0;
}
.main-menu ul > li > ul > li > ul{
    position: absolute;
    float: right;
    top: 0;
    right: 100%;
    margin: -2px 0px 0;
}
.main-menu ul > li > ul > li{
display:block;
float:none;
position:relative
}
.main-menu ul > li > ul > li:hover{
background:rgba(0, 0, 0, 0.13) none repeat scroll 0 0
}
.main-menu ul > li > ul > li:hover > a{
color:#fff
}
.main-menu ul > li.sub-menu > a:after{
content:'\f107';
float:right;
font-family:FontAwesome;
font-size:12px;
font-weight:400;
margin:0 0 0 5px
}
.main-menu .sub-menu > ul{
width:100%;
box-sizing:border-box;
padding:20px 10px
}
.main-menu .mega-menu > ul.mega-menu-inner{
overflow:hidden
}
.main-menu ul > li:hover > ul,#main-menu ul > li > ul > li:hover > ul{
visibility:visible;
opacity:1
}
.main-menu ul ul{
transition:all .25s ease
}

    <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="https://some URL">Home</a></li>
<li><a class="pagess" href="#">Some menu item</a>

<ul>
  <li>            

                      </li>
</ul>

</li>
<li><a class="pagess" href="#">some menu item</a>
<ul class="sub-menu">
  <li><a class="pagess" href="#">some menu item</a>
    <ul>
      <li><a class="pagess" href="#">test</a></li>
      <li><a class="pagess" href="#">test</a></li>
      <li><a class="pagess" href="#">test</a></li>
      <li><a class="pagess" href="#">test</a></li>
    </ul>
  </li>
  <li><a class="pagess" href="#">some menu item</a></li>
  <li><a class="pagess" href="#">some menu item</a></li>
  <li><a class="pagess" href="#">some menu item</a></li>
  <li><a class="pagess" href="#">Financial services in Georgia</a></li>
                                                
</ul>
</li>
<li><a class="pagess" href="#">Why Georgia</a>
<ul>
  <li>            

                      </li>
</ul>
</li>
<li><a class="pagess" href="/contact">Contact</a>
<ul>
  <li>            

                      </li>
</ul>
</li>
                      

                      
                </ul>
            </div>
        </div>
    </nav>

Answer 2

这是在鼠标悬停时显示子菜单的方法

这里是变化

     .main-menu ul.nav li ul.sub-menu ul.sub-menu {
        display: none;
        top: -2px;
        left: 100%;
      }
      .main-menu ul.nav li ul.sub-menu li:hover > ul {
        display: block;
      }

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>title</title>
    <style>
      .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.nav li ul.sub-menu ul.sub-menu {
        display: none;
        top: -2px;
        left: 100%;
      }
      .main-menu ul.nav li ul.sub-menu li:hover > ul {
        display: block;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html>

我希望将鼠标悬停在该子菜单项上后在右侧显示另一个（二级）子菜单

I want that submenu item after hovering over it show another (second level) submenu at the right

html

css

menu

hover