Question

尽管做了很多努力，但我无法制作与父级相同宽度的下拉菜单。请帮帮我。 Fiddle here

#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>

Answer 1

在下拉菜单中，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/

Answer 2

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

DEMO

Answer 3

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

Answer 4

这个怎么样？

只需在#menu ul中将宽度设置为100％，即可获得相同大小的下拉列表。

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

下拉菜单宽度问题

4 个答案: