1

尽管付出了很多努力，但我无法使下拉菜单的宽度与父级相同。请帮帮我。在这里提琴

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu {
    width: 958px;
    /*margin: 60px auto;*/
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);

    box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}
#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 11px 40px;
    color: #999;
    text-transform: uppercase;

    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}
#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1000000;    
    background: #444;    
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);    

    transition: all .2s ease-in-out;  
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;


    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);        
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #000000;
}
#menu ul li:first-child > a {
    /*border-radius: 3px 3px 0 0;*/
    padding: 11px 13px;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;    



}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #000; 
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #000; 
    border-bottom-color: transparent;     
}

#menu ul li:last-child > a {
    /*border-radius: 0 0 3px 3px*/;
    padding: 11px 20px;

}
​

HTML:

<ul id="menu">

                                                          <li><a href="#">About </a></li>

                                                          <li><a href="#">Programmes</a>
                                                          <ul>
                                                                <li><a href="#">Undergraduate</a></li>
                                                                <li><a href="#">Postgraduate</a></li>
                                                                </ul>
                                                          </li>
                                                          <li><a href="#">Academics</a></li>
                                                          <li><a href="#">Research</a></li>
                                                          <li><a href="#">Facilities</a></li>
                                                          <li></li>             
                                        </ul>  

    ​
4

4 回答 4

2

在下拉菜单中的 ul 元素中添加“right: 0”（或在您的情况下为 -1px 以考虑边框）：

#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
right: -1px /*  <-- add this */
z-index: 1000000;    
background: #444;    
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);    

transition: all .2s ease-in-out;
}

然后删除 a 元素中的 width 属性：

#menu ul a {    
padding: 10px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

这将独立于菜单容器宽度工作。

工作小提琴http://jsfiddle.net/chopsticks/XLxJk/4/

于 2012-10-02T18:09:02.647 回答
1 
#menu ul a {    
 padding: 10px;
 width: 150px;
 _height: 10px; /*IE6 only*/
 display: block;
 white-space: nowrap;
 float: none;
 text-transform: none;
}
#menu ul li:first-child > a {
 padding: 11px 20px;
}

演示

于 2012-10-02T17:54:13.343 回答
1

因此，通过绝对定位您的下拉菜单，您可以将其从流程中移除。这会导致它不再按其父元素的宽度调整大小。您需要显式设置宽度，通过 js 显式设置宽度（如果您希望菜单项根据它们包含的文本调整大小）或弄清楚如何以不同的方式定位它以便继承宽度。

于 2012-10-02T17:55:16.947 回答
1

这个怎么样 ？

只需在#menu ul 中将宽度设置为 100%，您就有一个相同大小的下拉菜单。

http://jsfiddle.net/XLxJk/3/

于 2012-10-02T18:01:36.527 回答