导航栏下拉宽度调整大小

Navbar dropdown width resize

我有一个在桌面和移动设备上都流畅的导航栏。但是,下拉项的宽度不会根据父项的宽度调整大小。我想将鼠标悬停在一个下拉项上,它的宽度与我悬停在其上的列表项的宽度相同。目前它有一个固定的宽度,但我似乎无法通过尝试其他选项来让它工作。我也无法让整个导航栏居中,因为此刻它卡在左边。感谢您的帮助!

这是代码的代码笔:https://codepen.io/Macast/pen/rYQPNe

HTML:

<nav>
        <div id="logo">
            <img src="images/J.-Freeman-&-Son-Landscape-Logo-White.png">
        </div>

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
                <!-- First Tier Drop Down -->
                <label for="drop-1" class="toggle">Short +</label>
                <a href="#">Short</a>
                <input type="checkbox" id="drop-1" />
                <ul>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Our Services</a></li>
                    <li><a href="#">Our Aim</a></li>
                </ul>

            </li>
            <li>
                <!-- First Tier Drop Down -->
                <label for="drop-2" class="toggle">Dropdown Even Longer +</label>
                <a href="#">Dropdown Even Longer</a>
                <input type="checkbox" id="drop-2" />
                <ul>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li>
                        <!-- Second Tier Drop Down -->
                        <label for="drop-3" class="toggle">More Options +</label>
                        <a href="#">More Options</a>
                        <input type="checkbox" id="drop-3" />

                        <ul>
                            <li><a href="#">Option</a></li>
                            <li><a href="#">Option</a></li>
                            <li><a href="#">Option</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Option</a></li>
            <li><a href="#">Option</a></li>
            <li><a href="#">Option</a></li>
            <li><a href="#">Option</a></li>
        </ul>
    </nav>

CSS:

.toggle,
[id^=drop] {
    display: none;
}
/* Giving a background-color to the nav container. */

nav {
    margin: 0;
    padding: 0;
    background-color: #254441;
}
#logo {
    display: block;
    text-align: center;
    /*padding: 0 30px;*/
    /*float: left;*/
    /*font-size: 20px;*/
    /*line-height: 60px; */
}
#logo img {
    width: 30%;
}
/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content: "";
    display: table;
    clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
    /*float: right;*/
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
/* Positioning the navigation items inline */

nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    background-color: #254441;
    text-align: center;
}
/* Styling the links */

nav a {
    display: block;
    padding: 14px 20px;
    color: #FFF;
    font-size: 17px;
    text-decoration: none;
    text-align: center;
}
nav ul li ul li:hover {
    background: #000000;
}
/* Background color change on Hover */

nav a:hover {
    background-color: #000000;
}
/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 60px;
}
/* Display Dropdowns on Hover */

nav ul li:hover > ul {
    display: inherit;
}
/* Fisrt Tier Dropdown */

nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
    text-align: center;
}
/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
    position: relative;
    top: -60px;
    /* has to be the same number as the "width" of "nav ul ul li" */

    left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */

li > a:after {
    content: ' +';
}
li > a:only-child:after {
    content: '';
}
/* Media Queries
--------------------------------------------- */

@media all and (max-width: 768px) {
    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }
    #logo img {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }
    nav {
        margin: 0;
    }
    /* Hide the navigation menu by default */
    /* Also hide the  */

    .toggle + a,
    .menu {
        display: none;
    }
    /* Stylinf the toggle lable */

    .toggle {
        display: block;
        background-color: #254441;
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
        text-decoration: none;
        border: none;
        text-align: center;
    }
    .toggle:hover {
        background-color: #000000;
    }
    /* Display Dropdown when clicked on Parent Lable */

    [id^=drop]:checked + ul {
        display: block;
    }
    /* Change menu item's width to 100% */

    nav ul li {
        display: block;
        width: 100%;
    }
    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }
    nav ul ul ul a {
        padding: 0 80px;
    }
    nav a:hover,
    nav ul ul ul a {
        background-color: #000000;
    }
    nav ul li ul li .toggle,
    nav ul ul a,
    nav ul ul ul a {
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
    }
    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #212121;
    }
    /* Hide Dropdowns by Default */

    nav ul ul {
        float: none;
        position: static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }
    /* Hide menus on hover */

    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
    /* Fisrt Tier Dropdown */

    nav ul ul li {
        display: block;
        width: 100%;
    }
    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
}
@media all and (max-width: 330px) {
    nav ul li {
        display: block;
        width: 94%;
    }
}

要将下拉菜单的大小调整为与包含的 list-item 相同的大小,请在 0 上声明 leftright 属性 值有问题的下拉元素 (nav ul ul),然后删除在下拉菜单 (nav ul ul li) 的嵌套列表项上显式声明的 width

示例:

nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
    /* additional property values declared */
    left: 0;
    right: 0;
}

这是有效的,因为下拉菜单 已经定位 absolute 包含 parent 元素列表项(nav ul li) 已定位 relative.

如果 parent 是 relative,您可以将 absolute 个元素 相对于 定位到它们的 parent。

所以我们在这里所做的就是将下拉菜单宽度的范围从parent的宽度[=60]的"left to right"定义为"stretch" =].

代码片段演示:

.toggle,
[id^=drop] {
    display: none;
}
/* Giving a background-color to the nav container. */

nav {
    margin: 0;
    padding: 0;
    background-color: #254441;
}
#logo {
    display: block;
    text-align: center;
    /*padding: 0 30px;*/
    /*float: left;*/
    /*font-size: 20px;*/
    /*line-height: 60px; */
}
#logo img {
    width: 30%;
}
/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content: "";
    display: table;
    clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
/* Positioning the navigation items inline */

nav ul li {
    margin: 0px;
    display: inline-block;
    background-color: #254441;
    text-align: center;
    position: relative;
}
/* Styling the links */

nav a {
    display: block;
    padding: 14px 20px;
    color: #FFF;
    font-size: 17px;
    text-decoration: none;
    text-align: center;
}
nav ul li ul li:hover {
    background: #000000;
}
/* Background color change on Hover */

nav a:hover {
    background-color: #000000;
}
/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 60px;
    left: 0;
    right: 0;
}
/* Display Dropdowns on Hover */

nav ul li:hover > ul {
    display: inherit;
}
/* Fisrt Tier Dropdown */

nav ul ul li {
    /*width: 170px;*/
    float: none;
    display: list-item;
    position: relative;
    text-align: center;
}
/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
    position: relative;
    top: -60px;
    /* has to be the same number as the "width" of "nav ul ul li" */
    
    left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */

li > a:after {
    content: ' +';
}
li > a:only-child:after {
    content: '';
}
/* Media Queries
--------------------------------------------- */

@media all and (max-width: 768px) {
    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }
    #logo img {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }
    nav {
        margin: 0;
    }
    /* Hide the navigation menu by default */
    /* Also hide the  */
    
    .toggle + a,
    .menu {
        display: none;
    }
    /* Stylinf the toggle lable */
    
    .toggle {
        display: block;
        background-color: #254441;
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
        text-decoration: none;
        border: none;
        text-align: center;
    }
    .toggle:hover {
        background-color: #000000;
    }
    /* Display Dropdown when clicked on Parent Lable */
    
    [id^=drop]:checked + ul {
        display: block;
    }
    /* Change menu item's width to 100% */
    
    nav ul li {
        display: block;
        width: 100%;
    }
    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }
    nav ul ul ul a {
        padding: 0 80px;
    }
    nav a:hover,
    nav ul ul ul a {
        background-color: #000000;
    }
    nav ul li ul li .toggle,
    nav ul ul a,
    nav ul ul ul a {
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
    }
    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #212121;
    }
    /* Hide Dropdowns by Default */
    
    nav ul ul {
        float: none;
        position: static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }
    /* Hide menus on hover */
    
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
    /* Fisrt Tier Dropdown */
    
    nav ul ul li {
        display: block;
        width: 100%;
    }
    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
}
@media all and (max-width: 330px) {
    nav ul li {
        display: block;
        width: 94%;
    }
}
<nav>
            <div id="logo">
                <img src="images/J.-Freeman-&-Son-Landscape-Logo-White.png">
            </div>

            <label for="drop" class="toggle">Menu</label>
            <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-1" class="toggle">Short +</label>
                    <a href="#">Short</a>
                    <input type="checkbox" id="drop-1" />
                    <ul>
                        <li><a href="#">History</a></li>
                        <li><a href="#">Our Services</a></li>
                        <li><a href="#">Our Aim</a></li>
                    </ul>

                </li>
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-2" class="toggle">Dropdown Even Longer +</label>
                    <a href="#">Dropdown Even Longer</a>
                    <input type="checkbox" id="drop-2" />
                    <ul>
                        <li><a href="#">Option</a></li>
                        <li><a href="#">Option</a></li>
                        <li><a href="#">Option</a></li>
                        <li>
                            <!-- Second Tier Drop Down -->
                            <label for="drop-3" class="toggle">More Options +</label>
                            <a href="#">More Options</a>
                            <input type="checkbox" id="drop-3" />

                            <ul>
                                <li><a href="#">Option</a></li>
                                <li><a href="#">Option</a></li>
                                <li><a href="#">Option</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Option</a></li>
                <li><a href="#">Option</a></li>
                <li><a href="#">Option</a></li>
                <li><a href="#">Option</a></li>
            </ul>
        </nav>

另外:
您可以通过删除在嵌套 list-items (nav ul li) 上声明的 float 规则来水平居中导航菜单,因为这将否定任何对齐内容的尝试(除非您使用 flex-box),然后在包含的无序列表 (.menu) 上声明 text-align: center,如下所示:

nav ul {
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}