我很难搞清楚这一点。我试图在Wordpress中自定义导航栏，这样当我将鼠标悬停在子菜单上时，Sub-Sub菜单从顶部开始，无论我将哪个子菜单悬停在上面。
亚马逊的菜单结构是我想要做的一个很好的例子。无论您将鼠标悬停在哪个部门，菜单大小都保持不变，从顶部开始。
我的导航菜单结构现在是：
主导航
现在，当我将鼠标悬停在子菜单1上时，下一个菜单将与子菜单1（好）并行打开。当我将鼠标悬停在子菜单2上时，下一个菜单将与子菜单2（坏）并行打开。我希望它打开与子菜单1行相同的高度，无论我是否悬停在子菜单1,2,3,4或5上。我还想保留子子菜单菜单大小相同，无论我在那里放多少链接。
有人可以帮忙吗？
/**
* 4.2 Navigation
* ----------------------------------------------------------------------------
*/
.main-navigation {
clear: both;
min-height: 35px;
position: relative;
}
ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
position: relative;
background: url("images/saprator.png") no-repeat scroll right center transparent;
}
.nav-menu li ul li { background:none;}
.nav-menu li a {
color: #FFFFFF;
display: block;
font-size: 15px;
line-height: 1.2;
padding: 12px 35px;
text-decoration: none;
font-family:'Ubuntu',Arial,Helvetica,sans-serif;
font-family:'Open Sans',Arial,Helvetica,sans-serif;
XXXtext-transform:uppercase;
}
.nav-menu li a:hover{ color:#FFFFFF;}
.nav-menu li:last-child { background:none;}
.nav-menu .sub-menu,
.nav-menu .children {
display: none;
position: absolute;
left: -2px;
z-index: 99999;
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-khtml-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
padding: 6px;
background:url("images/dropdown_bg.jpg") repeat scroll 0 0 transparent ;
border: 1px solid #D3D3D3;
padding: 5px;
}
.nav-menu li li a,
.nav-menu .sub-menu a, .nav-menu .children a{
XXborder-radius: 3px;
XX-moz-border-radius: 3px;
XX-khtml-border-radius: 3px;
color: #777777;
padding: 8px 10px;
text-transform: capitalize;
}
.nav-menu .sub-menu a:hover, .nav-menu .children a:hover{
color: #903537;
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
left:160px;
top:0px;
}
.nav-menu li.main-li:nth-last-child(1) .sub-menu ul,
.nav-menu li.main-li:nth-last-child(1) .children ul,
.nav-menu li.main-li:nth-last-child(2) .sub-menu ul,
.nav-menu li.main-li:nth-last-child(2) .children ul,
.nav-menu li.main-li:nth-last-child(3) .sub-menu ul,
.nav-menu li.main-li:nth-last-child(3) .children ul {
left: -200px;
right: auto;
top: 0;
width: 205px;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
margin: 0;
width: 160px;
height: 50px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
color: #FFF;
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a { }
.menu-toggle {
display: none;
}
/* Navbar */
.navbar {
width: 100%;
clear:both;
background: url("images/menu_bg.png") repeat scroll center bottom transparent;
position:relative;
height: 45px;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
}
.search-form, #searchform {
background: url("images/search_bg.png") repeat scroll center bottom transparent;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
padding: 5px;
text-align: right;
width: 240px;
display: inline-block;
position: relative;
}
.header-main .search-form,
.header-main #searchform {
position: absolute;
top: 45px;
left: 0;
}
.search-field,
#searchform input[type="text"] {
background-color: #fff;
border: 1px solid #E8E6DD;
cursor: text;
outline: 0;
width: 235px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
padding:5px 30px 5px 8px;
float:left;
}
.widget-area .search-form,
.widget-area #searchform{
margin: 0;
padding: 0;
background: none;
width: 100%;
}
input[type=text]{
border: 1px solid #d1d3d4;
}
.header-main .search-field:focus,
.header-main #searchform input[type="text"]:focus {}
.search-field:focus,
input[type="text"]:focus { border: 1px solid #E8E6DD; border: 1px solid #d1d3d4; }
.search-form .search-submit, #searchform #searchsubmit {
background: url("images/sprite.png") no-repeat scroll 0px -222px transparent !important;
border: medium none;
border-radius: 0;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
color: #FFFFFF;
float: left;
height: 30px;
margin: 0 5px;
overflow: hidden;
padding: 0;
position: absolute;
right: 0;
text-indent: -959px;
text-transform: uppercase;
width: 24px;
z-index: 3;
top: 1px;
}
.search-form .search-submit:hover,
.search-form .search-submit:focus,
#searchform #searchsubmit:hover,
#searchform #searchsubmit:focus{ background: none; border: none;}
.widget-area .search-form .search-submit,
.widget-area #searchform #searchsubmit{ top: -5px;}
#tertiary .sidebar-inner .search-field,
#tertiary .sidebar-inner input[type="text"] { margin-top:0; width: 100%;}
.widget_search{ overflow: hidden; position:relative;}
.header-login-logout{
}
/*** Top Area ***/
#top-area{
clear: both;
margin: 0 auto 10px;
}
/*** End Top Area ***/
#menu-navigation-bar menu, #menu-navigation-bar ol, #menu-navigation-bar ul {
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#menu-navigation-bar .position1 span, #menu-navigation-bar .position2 span, #menu-navigation-bar .position3 span{
display: block;
color: #243889 !important;
font-family: 'Ubuntu',Arial,Helvetica,sans-serif;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-size: 15px;
padding-left: 7px;
padding-top: 10px;
padding-bottom: 20px;
font-weight: bold;
text-decoration: underline;
background-color: #FFF;
}
#menu-navigation-bar ul.slide-menu li {
height: auto;
line-height: 16px;
padding-top: 0px;
padding-bottom: 0px;
float: none;
background-color: #FFF;
XXcolor: #000000 !important;
font-size: 14px;
border: none;
position: relative;
}
#menu-navigation-bar ul.slide-menu li.wide:hover {
XXbackground: #ecf0f1;
XXbackground-color: #ecf0f1 !important;
-moz-transition: ease-in-out all .2s;
-webkit-transition: ease-in-out all .2s;
}
#menu-navigation-bar ul.slide-menu li.wide {
//width: 720px;
XXbackground-color: #ecf0f1;
overflow: auto;
position: relative;
left: 2px;
border: 0px solid #dde4e6;
}
/* widths for the slide-menu based on how many panels (positions) are loaded */
#menu-navigation-bar ul.slide-menu li.position-1 { width: 200px; }
#menu-navigation-bar ul.slide-menu li.position-2 { width: 400px; }
#menu-navigation-bar ul.slide-menu li.position-3 { width: 600px; }
/* panel positions */
#menu-navigation-bar ul.slide-menu li div.position1 {
width: 200px;
height: 600px;
float: left;
overflow: hidden;
}
#menu-navigation-bar ul.slide-menu li div.position2 {
float: left;
width: 200px;
overflow: hidden;
}
#menu-navigation-bar ul.slide-menu li div.position3 {
float: left;
width: 200px;
overflow: hidden;
}
/* styles */
#menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div {
font-family: open sans, arial;
font-weight: bold;
}
#menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div ul.mini li {
padding: 2px;
margin: 3px;
list-style-type: none;
list-style-position: inside;
font-size: 11px;
font-weight: normal;
color: #333333;
}
#menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div ul.mini li a {
color: #333333;
font-size: 11px;
text-decoration: none;
font-family: Open Sans, Arial;
}
#menu-navigation-bar ul li.end ul.sub-menu li ul.slide-menu li.wide div ul.mini li:hover {
font-color: #333;
text-decoration: none;
font-family: Open Sans, Arial;
XXbackground-color: #fff !important;
transition: ease-in-out all .2s;
-moz-transition: ease-in-out all .2s;
-webkit-transition: ease-in-out all .2s;
}
.sub-menu{
box-shadow: 1px 1px 1px #CCCCCC;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px;
}
#menu-navigation-bar{
XXXbox-shadow: 1px 1px 1px #CCCCCC;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px;
}
.slide-menu{
padding-left: 10px !important;
padding-bottom: 10px !important;
}
.slide-menu a{
font-size: 14px !important;
padding: 0px !important;
padding-left: 10px !important;
padding-top: 5px !important;
}
.subHeader{
font-size: 19px !important;
}
.gridNav{
margin-bottom: 16px;
margin-left: 11px;
}
.gridNav td{
font-size: 12px;
}
.gridNav td:nth-child(3){
font-size: 12px;
}
.gridNav:first-child, .gridButton, #catfilters a, #searchwithin{
padding-left: 5px;
border-radius: 5px;
box-shadow: 0px 0px 4px #E0E0E0;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
答案 0 :(得分：0)
你有什么尝试？或者你是否要求有人为你写？ 以下是您将如何开始：
ul.nav-menu{display:block;}
ul.nav-menu > ul{
display:block;
left:200px;
}