我的sub-menu
和sub-sub-menu
似乎彼此之间存在很大差距,并且与主菜单不一致。我希望sub-menu
从主菜单直接下拉,sub-sub-menu
在悬停时打开在sub-menu
的右侧。我怎样才能做到这一点?下面将子菜单与主菜单对齐
是我的代码:
.nav-bar {
\t max-height: 0;
\t margin-left: 0;
\t padding-left:20px;
\t padding-top: 200px;
}
.box-nav-bar ul{
\t display:inline-block;
\t
\t text-decoration: none;
\t padding: 0;
\t list-style-type: none;
\t margin:0;
}
.box-nav-bar ul li{
\t display: inline-block;
\t padding: 20px;
\t border: 1px solid grey;
\t width: 100px;
\t height: 50px;
\t line-height: 50px;
\t
\t text-align: center;
\t position: relative;
\t
}
.box-nav-bar ul li a{
\t text-decoration: none;
\t list-style: none;
\t color: black;
\t font-size: 18px;
\t font-weight: bold;
\t font-family: Arial;
\t display:block;
\t
}
.box-nav-bar ul li:hover{
\t background-color: grey;
\t
}
.box-nav-bar ul .sub-menu ul li{
\t text-decoration: none;
\t padding: 0;
\t margin: 0;
\t list-style-type: none;
\t width: 150px;
\t
\t
}
.box-nav-bar ul .sub-menu {
\t display: none;
\t font-size: 14px solid;
\t position:absolute;
\t text-align: center; \t
}
.box-nav-bar li:hover .sub-menu{
\t display: block;
\t
}
.sub-sub-menu{
\t display: none;
\t font-size: 14px solid;
\t position:absolute;
\t text-align: center;
}
.box-nav-bar li:hover .sub-menu li:hover{
\t display: block;
\t
}
<div class="nav-bar">
\t \t <nav class="box-nav-bar">
\t \t \t <ul>
\t \t \t \t <li> <a href="/Home">HOME</a></li>
\t \t \t \t <li> <a href="/Home">ABOUT</a></li>
\t \t \t \t <li> <a href="/Home">SERVICES</a>
\t \t \t \t \t <ul class="sub-menu">
\t \t \t \t <li>
\t \t \t \t \t \t \t <a href="#">Lorem ipsum</a>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <a href="#">Dolor sit amet </a>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <a href="#">Conse ctetur </a>
\t \t \t \t \t \t \t \t <ul class="sub-sub-menu">
\t \t \t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t \t \t <a href="#">Latest</a>
\t \t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t \t \t <a href="#">Archive</a>
\t \t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li> <a href="/Home">PROJECTS</a></li>
\t \t \t \t <li> <a href="/Home">CONTACTS</a></li>
\t \t \t </ul>
\t \t </nav>
</div>
谢谢。
谢谢。这有帮助。 –