Question

我正在使用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;
}

Answer 1

您的.sub菜单的样式为width:500px!important;。将其更改为width:20%; 另外，请删除.sub-menu li{ width:50% !importnant;}这会导致您的问题。我也改变了儿童div的宽度。

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

Answer 2

我证明了你的代码，我编辑了你的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%;
}

我希望我帮助你

根据父级的下拉子菜单的宽度

2 个答案: