我正在使用嵌套在 ul 中的 li 进行下拉，但无法将 li 的宽度设置为动态匹配 ul 的宽度。
请注意，li 元素被限制在下拉列表中。
下面的css看起来太多了，但本质上它只是关于ul和li。
CSS
<style type="text/css" media="screen, tv, projection">
/* - - - ADxMenu: BASIC styles - - - */
/* remove all list stylings
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
*/
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the bottom left corner, */
bottom: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
bottom: 100%; /* 1st level go above their parent item */
}
.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
bottom: 0;
left: 100%;
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
.menu ul ul {
padding: 30px 30px 30px 10px;
margin: 0 0 -30px -10px;
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu, .menu ul li {
color: #eee;
background: #000;
}
.menu ul {
background: #000;
width: 11em;
}
.menu a {
text-decoration: none;
padding: .4em 1em;
display: block;
position: relative;
font-family:BlairMdITCTTMedium;
color:#848484;
font-size:11px;
}
.menu a:hover, .menu li:hover>a {
color: #ccc;
}
.menu li li { /* create borders around each item */
border: 1px solid #000;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
bottom: 5px;
left: 90%;
}
/* Fix for IE5/Mac \*//*/
.menu a {
float: left;
}
/* End Fix */
/*]]>*/
</style>
**THE HTML CODE**
<ul class="menu">
<li style="width:80px;">
<a id="menu1" title="View all posts filed under Accessories" href="http://monique-relander.be/objects/accessories/">Accessories</a>
<ul>
<li><a href="http://www.aplus.co.yu/">Home</a></li>
<li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li>
<li><a href="http://www.aplus.co.yu/archive/">Archive</a></li>
</ul>
</li>
<li style="width:80px;">
<a title="View all posts filed under Furniture" href="http://monique-relander.be/objects/furniture/">Furniture</a>
<ul>
<li><a href="http://www.aplus.co.yu/">Home</a></li>
<li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li>
<li><a href="http://www.aplus.co.yu/archive/">Archive</a></li>
</ul>
</li>
<li style="width:80px;">
<a title="View all posts filed under Lighting" href="http://monique-relander.be/objects/lighting/">Lighting</a>
<ul>
<li><a href="http://www.aplus.co.yu/">Home</a></li>
<li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li>
<li><a href="http://www.aplus.co.yu/archive/">Archive</a></li>
</ul>
</li>
<li style="width:80px;">
<a title="View all posts filed under Mirrors" href="http://monique-relander.be/objects/mirrors/">Mirrors</a>
<ul>
<li><a href="http://www.aplus.co.yu/">Home</a></li>
<li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li>
<li><a href="http://www.aplus.co.yu/archive/">Archive</a></li>
</ul>
</li>
<li class="none" style="width:140px;">
<a title="View all posts filed under NEW ARRIVALS" href="http://monique-relander.be/objects/new-arrivals/">New Arrivals</a></li>
<li style="width:130px;">
<a title="View all posts filed under Sold Gallery" href="http://monique-relander.be/objects/sold-gallery/">Sold Gallery</a></li>
<li class="cat-item right">
<a href="/contact">Contact</a></li>
</ul>