Navbar下拉宽度调整大小

时间：2017-11-30 13:09:17

标签： html css navigation width navbar

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

这是代码的代码：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%;
    }
}

1 个答案:

答案 0 :(得分：1)

要将下拉菜单大小调整为与包含列表项相同的大小，请在相关下拉列表元素上声明left和right属性值0（{{ 1}}），然后删除下拉菜单（nav ul ul）的嵌套列表项上显式声明的width。

示例： 

nav ul ul li

这是有效的，因为下拉菜单已经定位nav ul ul { display: none; position: absolute; top: 60px; /* additional property values declared */ left: 0; right: 0; } 和包含的父元素列表项（absolute）已经定位nav ul li 。

如果他们的父母是relative，您可以将absolute元素相对定位到他们的父母。

所以我们在这里所做的就是将下拉菜单宽度的范围定义为＆＃34; stretch＆＃34;从＆＃34;从左到右＆＃34; 父级的宽度。

代码段示范：

＆＃13;
＆＃13; 
relative
＆＃13; 
.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%;
    }
}
＆＃13;
＆＃13;
＆＃13;

另外：
您可以通过删除在嵌套列表项（<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>）上声明的float规则来水平居中导航菜单，因为这将取消任何对齐内容的尝试（除非您使用nav ul li），然后在包含的无序列表（flex-box）上声明text-align: center，如下所示：

.menu
相关问题
最新问题