Question

我是CSS的新手，如果我老实说，我真的不知道自己在做什么。有一段时间了，我一直试图让下拉菜单上的子页面与父页面的宽度至少相同。

经过几个小时的沮丧，我在谷歌上找不到任何东西，我想我应该问一个真正了解他们正在做什么的人。这是（糟糕的）代码：

.menu li > a:after {
    color: #fff;
    content: ' ▼';
}

.menu li > a:only-child:after {
    content: '';
}



#main-nav {
    background-color: #6699FF;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align: center;
    display: block;
    float: left;
    width: 100%;
}

#main-nav li {
    position: relative;
}

#main-nav ul {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    list-style: none;
    display: block;
}

#main-nav ul li {
    float: left;
    display: block;
    position: relative;
}

#main-nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline;
}


#main-nav a:link, #main-nav a:visited {
    color: #FFF;
    display: block;
    padding: 10px 25px;
    height: 20px;
}



/*Sub menus */


#main-nav {
    overflow: visible;
}

#main-nav ul {
    right: 0;
}

#main-nav ul li ul.sub-menu {
    position:absolute;
    display:none;
    margin: 0;
    padding: 0!Important;
    float: none;
}

#main-nav ul li:hover ul.sub-menu {
    display:block!important;
    float: none;
    white-space: nowrap;

}

#main-nav ul li ul.sub-menu li {
    background: #6699FF;
    text-align: left;
    -webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;
    width: auto;
    left:0;
}
#main-nav ul li ul.sub-menu li a {
    width: auto;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}

这就是当我将鼠标悬停在父母身上时的样子＆＃39; meep＆＃39;页： http://i.imgur.com/rAXvvbP.png?1

我希望它的宽度相同，从左侧开始，以便由于长页面名称而导致的任何多余宽度都会向右移动。

我已经尝试更改显示类型和宽度，但还没有:(

我非常感谢任何帮助！提前致谢

抱歉可怕的代码

JSfiddle：http://jsfiddle.net/q5381Ly5/1/

Answer 1

我只更改这两个，添加宽度100％，它将获得父级的整个宽度。

这是一个演示http://jsfiddle.net/q5381Ly5/4/

    #main-nav ul li:hover ul.sub-menu {
        display:block!important;
        float: none;
        white-space: nowrap;
        width:100%;
    }

    #main-nav ul li ul.sub-menu li {
        width:100%;
        background: #6699FF;
        text-align: left;
        -webkit-transition: height 0.3s ease-in;
                -moz-transition: height 0.3s ease-in;
                -o-transition: height 0.3s ease-in;
                -ms-transition: height 0.3s ease-in;
                transition: height 0.3s ease-in;
        left:0;
    }

Answer 2

不要将宽度auto添加到子菜单，而是将其更改为100%

下拉子菜单与主菜单栏的宽度相同

2 个答案: