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

Question

我是 CSS 的新手，老实说，我真的不知道自己在做什么。一段时间以来，我一直在尝试使下拉菜单中的子页面至少与父页面具有相同的宽度。

在对我在 google 上找不到任何东西感到沮丧数小时后，我想我应该问问真正知道他们在做什么的人。这是(糟糕的)代码:

.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;
}

这是我将鼠标悬停在父“meep”页面上时的样子: http://i.imgur.com/rAXvvbP.png?1

我希望它具有相同的宽度，从左侧开始，这样由于长页面名称而导致的任何多余宽度都将移至右侧。

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

如果有任何帮助，我将不胜感激!提前致谢

对不起，糟糕的代码

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

Answer 1

我只改这两个，加上width 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;
    }