CSS 下拉菜单 - 使孩子至少与父母一样宽 [英] CSS drop down menu - Making children at least the width of parents

查看：19
本文介绍了CSS 下拉菜单 - 使孩子至少与父母一样宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个工作正常的三层 CSS 下拉菜单，但我目前正在为第二层和第三层列表项指定实际宽度.我一直在摆弄几个小时，试图让它看起来像我想要的样子，但没有成功.

我想要的是第二层中的项目的最小宽度等于其父项的宽度，如果项目的内容比其父项的内容长，则延伸超过该宽度.

我还希望第三层中的项目没有最小宽度，而是宽度正好是该特定嵌套无序列表的最长列表项目的内容的宽度.

我当前的 HTML 和 CSS 在这里:http://jsfiddle.net/kBVYD/1/

如果您只想查看代码，这里是 HTML:

这是 CSS:

#menu1 *{边距:0；填充:0；}#menu1 ul.menu{向左飘浮;字体系列:Arial"，无衬线；字体大小:14px；字体粗细:粗体；文本转换:大写；}#menu1 ul.menu li{位置:相对；向左飘浮;列表样式类型:无；}#menu1 ul.menu li{位置:相对；显示:块；行高:21px；字体大小:14px；填充:14px 21px；文字装饰:无；z-索引:100；}#menu1 ul.menu >li:第一个孩子>一个{左边界:0；}#menu1 ul.menu >li:last-child >一个{边界右:0;}/** 子菜单 - 第 2 层 **/#menu1 ul.menu li ul.sub-menu{位置:相对；显示:无；边距:0；填充:0；}#menu1 ul.menu li:hover ul.sub-menu{显示:块；向左飘浮;位置:绝对；z-索引:200；}#menu1 ul.menu li ul.sub-menu >李:第一个孩子{边距:5px 0 0 0；}#menu1 ul.menu li ul.sub-menu li a{宽度:140px；显示:块；}#menu1 ul.menu li ul.sub-menu li:first-child >一个{边界顶部:0；}#menu1 ul.menu li ul.sub-menu li:last-child >一个{边框底部:0；}/** 子菜单 - 第 3 层 **/#menu1 ul.menu li ul.sub-menu li ul{位置:相对；显示:无；左:100%；}#menu1 ul.menu li ul.sub-menu li ul li{边距:0 0 0 5px；}#menu1 ul.menu li ul.sub-menu li:hover ul{显示:块；向左飘浮;位置:绝对；顶部:0；}#menu1 ul.menu li ul.sub-menu li ul li a{宽度:140px；显示:块；}/** 颜色样式 **/#menu1 ul.menu li{背景:#09F；颜色:#FFF；}#menu1 ul.menu >立>一个{左边框:1px 实心 #26A8FF；右边框:1px 实心 #0082D9；}#menu1 ul.menu li:hover >a, #menu1 ul.menu li a:hover{颜色:#09F；背景:#ddd;}#menu1 ul.menu li ul.sub-menu li a{边框顶部:1px 实心 #26A8FF；边框底部:1px 实心 #0082D9;}

解决方案

删除你添加的自定义宽度:

#menu1 ul.menu li ul.sub-menu li a {宽度:140px；}

现在的问题是ul.sub-menu 的维度是基于它的relative 父

  • .这里的技巧是使用 white-space: nowrap 将它推出它的父维度.然后使用 min-width 设置允许的最小宽度(或如您所说的至少是父母的宽度").

    #menu1 ul.menu li ul.sub-menu {最小宽度:100%；空白:nowrap；}

    I have a three-tier CSS drop down menu that is working fine, but I'm currently specifying an actual width for the second and third tier list items. I've been fiddling around for hours trying to get it to look the way I want but with no success.

    What I would like is for the items in the second tier to have a minimum width that is equal to the width of its parent, and extends past that width if the content of the item is longer than the content of its parent.

    I would also like the items in the third tier to have no minimum width, but rather have a width that is just the width of the content of the longest list item for that particular nested unordered list.

    My current HTML and CSS is here: http://jsfiddle.net/kBVYD/1/

    If you'd prefer to just see the code, here's the HTML:

    <div id="menu1">
    <ul class="menu">
        <li><a class="haschild" title="" href="">Home</a>
            <ul class="sub-menu">
                <li><a class="haschild" title="" href="">Sub Link 1</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
                <li><a title="" href="">Sub Link 2</a></li>
                <li><a class="haschild" title="" href="">Sub Link 3</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a class="haschild" title="" href="">About Us</a>
            <ul class="sub-menu">
                <li><a title="" href="">Sub Link 1</a></li>
                <li><a title="" href="">Sub Link 2</a></li>
                <li><a class="haschild" title="" href="">Sub Link 3</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a class="haschild" title="" href="">Our Services Etc Etc Etc</a>
            <ul class="sub-menu">
                <li><a title="" href="">Sub Link 1</a></li>
                <li><a class="haschild" title="" href="">Sub Link 2</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
                <li><a class="haschild" title="" href="">Sub Link 3</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>

    And here's the CSS:

    #menu1 *
{
    margin: 0;
    padding: 0;
}

#menu1 ul.menu
{
    float: left;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

#menu1 ul.menu li
{
    position: relative;
    float: left;
    list-style-type: none;
}

#menu1 ul.menu li a
{
    position: relative;
    display: block;
    line-height: 21px;
    font-size: 14px;
    padding: 14px 21px;
    text-decoration: none;
    z-index: 100;
}

#menu1 ul.menu > li:first-child > a
{
    border-left: 0;
}

#menu1 ul.menu > li:last-child > a
{
    border-right: 0;
}

/** Sub Menu - Tier 2 **/

#menu1 ul.menu li ul.sub-menu
{
    position: relative;
    display: none;
    margin: 0;
    padding: 0;
}

#menu1 ul.menu li:hover ul.sub-menu
{
    display: block;
    float: left;
    position: absolute;
    z-index: 200;
}

#menu1 ul.menu li ul.sub-menu > li:first-child
{
    margin: 5px 0 0 0;
}

#menu1 ul.menu li ul.sub-menu li a
{
    width: 140px;
    display: block;
}

#menu1 ul.menu li ul.sub-menu li:first-child > a
{
    border-top: 0;
}

#menu1 ul.menu li ul.sub-menu li:last-child > a
{
    border-bottom: 0;
}

/** Sub Menu - Tier 3 **/

#menu1 ul.menu li ul.sub-menu li ul
{
    position: relative;
    display: none;
    left: 100%;
}

#menu1 ul.menu li ul.sub-menu li ul li
{
    margin: 0 0 0 5px;
}

#menu1 ul.menu li ul.sub-menu li:hover ul
{
    display: block;
    float: left;
    position: absolute;
    top: 0;
}

#menu1 ul.menu li ul.sub-menu li ul li a
{
    width: 140px;
    display: block;
}


/** Colour Styles **/

#menu1 ul.menu li a
{
    background: #09F;
    color: #FFF;
}

#menu1 ul.menu > li > a
{
    border-left: 1px solid #26A8FF;
    border-right: 1px solid #0082D9;
}

#menu1 ul.menu li:hover > a, #menu1 ul.menu li a:hover
{
    color: #09F;
    background: #ddd;
}

#menu1 ul.menu li ul.sub-menu li a
{
    border-top: 1px solid #26A8FF;
    border-bottom: 1px solid #0082D9;
}

    解决方案

    Delete the custom width you added:

    #menu1 ul.menu li ul.sub-menu li a {
    width: 140px;
}

    The problem now is that the ul.sub-menu's dimension are based on it's relative parent <li>. The trick here is to use white-space: nowrap to push it out of it's parent's dimensions. Then use min-width to set the minimum width allowed (or as you stated "at least the width of parents").

    #menu1 ul.menu li ul.sub-menu {
    min-width: 100%;
    white-space: nowrap;
}

    这篇关于CSS 下拉菜单 - 使孩子至少与父母一样宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    • 查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆