Ширина выпадающего подменю в зависимости от родителя

Я использую Wordpress, и у меня есть горизонтальное раскрывающееся меню. И мне нужно иметь ту же ширину подменю, что и ширина родителя (ширина всего меню). Меню генерируется динамически, поэтому я не могу использовать фиксированную ширину.

Вот что у меня есть JSFiddle, и, например, первый элемент (1-й английский) имеет подменю, и мне нужно иметь ширина до последнего элемента (Контакт). Тогда это то же самое, например, пункт «Онлайн английский», где мне нужно иметь ширину подменю до последнего пункта (Контакты) и так далее.

Изменить: мне нужно сохранить горизонтальное подменю с тремя (максимум) элементами в каждом столбце.

Лучше всего ответить в 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;
}

Jaroslav Klimčík 23.06.2014 источник

Ответы (2)

arrow_upward
1
arrow_downward

Ваше .sub-меню имеет стиль width:500px!important;. Измените его на width:20%; Также удалите .sub-menu li{ width:50% !importnant;} Это вызывает вашу проблему. Я также изменил ширину дочернего блока.

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

Sburke0708 23.06.2014

comment

Спасибо, но мне нужно горизонтальное подменю с тремя пунктами в каждом столбце, и это подменю должно иметь ширину родительского меню (до последнего пункта - Контакты) - Jaroslav Klimčík; 24.06.2014

arrow_upward
1
arrow_downward

хорошо, я подтверждаю ваш код, и я отредактировал ваш стиль 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%;
}

надеюсь, я помог тебе

MickyScion 23.06.2014

comment

Ширина выпадающего подменю в зависимости от родителя

Ответы (2)

Похожие вопросы