文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Navbar下拉宽度调整

问Navbar下拉宽度调整
EN

Stack Overflow用户
提问于 2017-11-30 13:09:16
回答 1查看 2K关注 0票数 0

我有一个导航栏，在桌面和移动设备上都是流动的。但是，下拉项宽度不会根据父项的宽度来调整大小。我想悬停在一个下拉项目，它有相同的宽度，列表项目，我徘徊在上面。目前，它有一个固定的宽度，但我似乎无法使它通过尝试其他选择。我也不能让整个导航条中心，就像现在它被粘在左边一样。谢谢你的帮助！

下面是代码的代码部分：https://codepen.io/Macast/pen/rYQPNe

HTML：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
.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%;
    }
}
html
css
navigation
width
navbar
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-30 14:17:48

若要将下拉菜单大小调整为与包含列表项相同的大小，请在所述下拉元素(nav ul ul)上声明0的0和right属性值，然后删除下拉菜单(nav ul ul li)嵌套列表项上显式声明的width。

示例：

代码语言：javascript
复制
nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
    /* additional property values declared */
    left: 0;
    right: 0;
}

这是因为下拉菜单已经定位为absolute、和，包含父元素列表项(nav ul li)的位置已经定位为relative。

如果absolute元素的父元素是relative，则可以将其相对于其父元素定位。

因此，我们在这里所做的就是定义下拉菜单宽度的范围，使其从“左向右”延伸到父级宽度的“右”。

代码片段演示：

​

代码语言：javascript
复制
.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%;
    }
}
代码语言：javascript
复制
<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)，然后在包含的无序列表(.menu)上声明text-align: center，如下所示：

代码语言：javascript
复制
nav ul {
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47574290

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档