父母下拉菜單的寬度

我使用Wordpress，我有一個水平下拉菜單。而且我需要具有與父寬度（整個菜單的寬度）相同的子菜單寬度。菜單是動態生成的，所以我不能使用固定寬度。父母下拉菜單的寬度

這是我有JSFiddle，例如第一項（第一英語）有子菜單，我需要有寬度，直到最後一項（聯繫）。然後它也是相同的例如項目「在線英語」，我需要有子菜單的寬度，直到最後一個項目（聯繫人）等。

編輯： 我需要保持水平子菜單與每列三（最大）項目。

回答JSFiddle會是最好的。

HTML：

<div style="background-color: black"> 
<div class="menu-prvni-menu-container"> 
    <ul id="menu-prvni-menu" class="nav-menu"> 
     <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children dropdown menu-item-25"><a href="/subdom/1stenglish/">1st English</a> 

      <ul class="sub-menu"> 
       <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="/subdom/1stenglish/?page_id=2">1st 
           English</a> 

       </li> 
       <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="/subdom/1stenglish/?page_id=2">Client 
           centrum</a> 

       </li> 
       <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="/subdom/1stenglish/?page_id=2">1st English 
           method</a> 

       </li> 
       <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="/subdom/1stenglish/?page_id=2">Equipment</a> 

       </li> 
       <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="/subdom/1stenglish/?page_id=2">Price</a> 

       </li> 
      </ul> 
     </li> 
     <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-40"> <a href="/subdom/1stenglish/?page_id=2">Languages</a> 

      <ul class="sub-menu"> 
       <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="/subdom/1stenglish/?page_id=2">English</a> 

       </li> 
      </ul> 
     </li> 
     <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"> <a href="/subdom/1stenglish/">Study</a> 

     </li> 
     <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-29"> <a href="/subdom/1stenglish/">Teaching</a> 

     </li> 
     <li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children dropdown menu-item-31"> <a href="/subdom/1stenglish/">Online English</a> 

      <ul class="sub-menu"> 
       <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="/subdom/1stenglish/?page_id=2">Testing 
           page</a> 

       </li> 
       <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="/subdom/1stenglish/?page_id=2">Testing 
           page</a> 

       </li> 
      </ul> 
     </li> 
     <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-32"> <a href="/subdom/1stenglish/">Testing page</a> 

     </li> 
     <li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-33"> <a href="/subdom/1stenglish/">Test</a> 

     </li> 
     <li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-34"> <a href="/subdom/1stenglish/">Contact</a> 

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

CSS：

background-color: green .main-navigation { 
    clear: both; 
    margin: 0 auto; 
    max-width: 1080px; 
    min-height: 45px; 
    position: relative; 
} 

ul.nav-menu, div.nav-menu > ul { 
    margin: 0; 
    padding: 0 40px 0 0; 
} 
.nav-menu li { 
    display: inline-block; 
    position: relative; 
} 
.nav-menu li a { 
    color: #141412; 
    display: block; 
    font-size: 15px; 
    line-height: 1; 
    padding: 15px 20px; 
    text-decoration: none; 
} 
.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus { 
    background-color: #220e10; 
    color: #fff; 
} 
.nav-menu .sub-menu, .nav-menu .children { 
    background-color: #220e10; 
    border: 2px solid #f7f5e7; 
    border-top: 0; 
    padding: 0; 
    position: absolute; 
    left: -2px; 
    z-index: 99999; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
} 
.nav-menu .sub-menu ul, .nav-menu .children ul { 
    border-left: 0; 
    left: 100%; 
    top: 0; 
} 
ul.nav-menu ul a, .nav-menu ul ul a { 
    color: #fff; 
    margin: 0; 
    width: 200px; 
} 
ul.nav-menu ul a:hover, .nav-menu ul ul a:hover, ul.nav-menu ul a:focus, .nav-menu ul ul a:focus { 
    background-color: #db572f; 
} 
ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul, ul.nav-menu .focus > ul, .nav-menu .focus > ul { 
    clip: inherit; 
    overflow: inherit; 
    height: inherit; 
    width: inherit; 
} 
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a { 
    color: #bc360a; 
    font-style: italic; 
} 
.navbar { 
    border-top: 1px solid #b6985e; 
    background-color: #243138; 
    padding: 5px 0 0 30px; 
    /*min-height: 60px;*/ 
} 
.nav-menu li a { 
    color: #FFFFFF; 
    font-style: normal; 
} 
.sub-menu { 
    display: inline-block; 
    width: 500px !important; 
} 
.sub-menu li { 
    width: 50% !important; 
} 
.sub-menu li a:hover { 
    color: #FFFFFF; 
} 
.sub-menu li:nth-child(odd) { 
    float: left; 
} 
.nav-menu .sub-menu, .nav-menu .children { 
    background-color: #b6985e; 
    border: none; 
    padding: 0; 
    position: absolute; 
    z-index: 99999; 
    left: 0; 
} 
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a { 
    color: #FFFFFF; 
    font-style: normal; 
} 
.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus { 
    background-color: #b6985e; 
}

來源

2014-06-23 Jaroslav Klimčík

你.SUB菜單有width:500px!important;風格。將其更改爲width:20%; 另外，請刪除.sub-menu li{ width:50% !importnant;}這會導致您的問題。我也改變了孩子div的寬度。

http://jsfiddle.net/sburke0708/hcmeD/5/

來源

2014-06-23 18:12:50 Sburke0708

謝謝你，但我需要三個項目水平的子菜單在每一列和這個子菜單應該有父菜單的寬度（直到最後一項 - 「聯繫」） –

以及我證明你的代碼，我編輯你的CSS風格，它看起來像這樣

.main-navigation { 
    clear: both; 
    margin: 0 auto; 
    max-width: 1080px; 
    min-height: 45px; 
    position: relative; 
} 
ul.nav-menu, div.nav-menu > ul { 
    margin: 0; 
    padding: 0 40px 0 0; 
} 
.nav-menu li { 
    display: inline-block; 
    position: relative; 
} 
.nav-menu li a { 
    color: #141412; 
    display: block; 
    font-size: 15px; 
    line-height: 1; 
    padding: 15px 20px; 
    text-decoration: none; 
} 
.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus { 
    background-color: #220e10; 
    color: #fff; 
} 
.nav-menu .sub-menu, .nav-menu .children { 
    background-color: #220e10; 
    border: 2px solid #f7f5e7; 
    border-top: 0; 
    padding: 0; 
    position: absolute; 
    left: -2px; 
    z-index: 99999; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
} 
.nav-menu .sub-menu ul, .nav-menu .children ul { 
    border-left: 0; 
    left: 100%; 
    top: 0; 
} 
ul.nav-menu ul a, .nav-menu ul ul a { 
    color: #fff; 
    margin: 0; 
} 

ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul, ul.nav-menu .focus > ul, .nav-menu .focus > ul { 
    clip: inherit; 
    overflow: inherit; 
    height: inherit; 
} 
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a { 
    color: #bc360a; 
    font-style: italic; 
} 
.navbar { 
    border-top: 1px solid #b6985e; 
    background-color: #243138; 
    padding: 5px 0 0 30px; 
    /*min-height: 60px;*/ 
} 
.nav-menu li a { 
    color: #FFFFFF; 
    font-style: normal; 
} 

.nav-menu .sub-menu, .nav-menu .children { 
    background-color: #b6985e; 
    border: none; 
    padding: 0; 
    position: absolute; 
    z-index: 99999; 
    left: 0; 
    width:100%; 
} 
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a { 
    color: #FFFFFF; 
    font-style: normal; 
} 
.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus { 
    background-color: #b6985e; 
} 
.sub-menu li a:hover { 
    color: #FFFFFF; 
    background-color: #db572f; 
} 

.sub-menu li { 
    width:100%; 
}

我希望我幫你

來源

2014-06-23 19:35:01 MickyScion

謝謝，但我需要每列有三項的水平子菜單，這個子菜單應該有父菜單的寬度（直到最後一項 - 「聯繫」） –

父母下拉菜單的寬度

回答

相關問題