我正在尝试使用HTML5和CSS3构建一个集中对齐的下拉菜单。如果必须的话,我可以使用jQuery来协助。这必须在IE8 +中工作。目前,我的菜单集中对齐,下拉菜单工作,但下拉菜单的宽度(div
)与上面的li
的宽度相同。CSS下拉菜单,超过父宽度的儿童
<div class="menu">
<ul class="level0">
<li class="level0">
<a href=" http://domain.com/">
<span>home</span>
</a>
<div class="sub">
<div class="sub-column">
<a href="http://domain.com/customer-service">
<span>Customer Service</span>
</a>
</div>
<div class="sub-column">
<a href="http://domain.com/privacy-policy">
<span>Privacy Policy</span>
</a>
</div>
</div>
</li>
<li class="level0">
<a href=" http://domain.com/about">
<span>About Us</span>
</a>
<div class="sub">
<div class="sub-column">
<div>
<p>Blah blah blah, some random text goes here.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
而CSS(试图压缩它便于查看)。
.menu {
clear:both; display:block; max-width:100%; margin:0 auto; padding:0;
border:1px solid #ddd; border-bottom:7px solid #323131; text-align:center;
}
.menu ul {
display:block; max-width:100%; height:3.2em; margin:0 auto;
padding:0; list-style-type:none; text-align:center;
}
.menu ul li {display:inline-block; margin:0; padding:0; height:3.2em;
line-height:3.2em; position:relative;
}
.menu ul li > div {display:none; visibility:hidden; position:absolute;
background:#f60; z-index:999; transition:display 0.25s ease;
}
.menu ul li:hover > div {display:inline-block; visibility:visible;
max-width:100%;
}
.menu ul li a {display:block; margin:0; padding:0 2em; font-size:90%;
font-weight:700; text-transform:uppercase; transition:background-color 0.25s ease;
}
.menu ul li a:hover {background-color:#e4e4e4; color:#323131;}
.menu ul li.switcher {display:none;}
我怎样才能得到第一线的div(.menu ul li > div
)采用祖父母元素(.menu
)的宽度的宽度是多少?或者至少延长以适应使用max-width
的内容?
任何帮助表示赞赏。谢谢。
〜编辑〜
这里的小提琴:http://jsfiddle.net/Xp6yG/
使'.menu''位置:相对'。在这里,看看这个问题:(http://stackoverflow.com/questions/17568374/css-make-the-absolute-child-width-independent-from-the-relative-parent-width) – James