如何根据包含的链接长度自动定义下拉菜单的宽度:
这是我拥有的和我想要的照片:
这是现实:
这是我需要得到的:
这是我的 html 和 css(我尽可能地减少了 HTML - 刚离开菜单):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
/* Main styles */
/*drop default browser css settings*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
font: .8em 'Trebuchet MS', Trebuchet,Verdana, sans-serif;
line-height: 1;
color: #444;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
#second_menu {
margin: 25px 25px 0 40px;
border-bottom: 1px dotted #BBBBBB;
}
#second_menu li {
font-size: 1.1em;
font-weight: bold;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding: 10px 20px 15px 0;
position: relative;
height: auto;
}
#second_menu li a {
color: #757575;
text-decoration: none;
}
#second_menu li.multiple > a {
cursor: default;
}
#second_menu li:hover a,
#second_menu li.current a {
color: #6F8936;
}
#second_menu li.multiple a span {
background: url(../img/icons/sprite10.png) no-repeat -244px -370px;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
width: 7px;
height: 7px;
margin-left: 5px;
vertical-align: middle;
}
#second_menu li.multiple:hover a span,
#second_menu li.multiple.current a span {
background-position: -244px -379px;
}
#second_menu ul.subnav {
list-style: none;
position: absolute;
top: 39px;
left: -10px;
background-color: #fff;
border: 1px dotted #BBBBBB;
border-top: none;
}
#second_menu .subnav li {
display: block;
padding: 0;
margin: 0;
}
#second_menu .subnav li a {
color: #868686;
padding: 10px;
display: block;
font-weight: normal;
}
#second_menu .subnav li a:hover {
color: #616161;
background-color: #DFEBBD;
}
#second_menu li.multiple .subnav {
display: none;
}
#second_menu li.multiple:hover .subnav {
display: block;
}
</style>
</head>
<body id="main-page">
<div id="user-message-container"></div>
<!-- Header -->
<div id="header">
<div class="header-content">
<div id="user-block">
</div>
<div id="header-wrapper">
<div id="header-left">
<div id="logo">
<a href="http://mysite.com/" title=""></a>
</div>
</div>
<div id="header-menu">
</div>
</div>
</div>
<div class="clear"></div>
<div class="header-content">
<div id="info-search">
</div>
<ul id="second_menu">
<li class="current multiple"><a href="#">MENU1<span></span></a>
<ul class="subnav">
<li><a href="http://mysite.com/">Short name</a></li>
<li><a href="http://mysite.com/">This is a very long name</a></li>
<li><a href="http://mysite.com/">Shorty</a></li>
</ul>
</li>
<li class="multiple"><a href="#">MENU2<span></span></a>
<ul class="subnav">
<li><a href="http://mysite.com/">submenu1</a></li>
<li><a href="http://mysite.com/">submenu2</a></li>
</ul>
</li>
<li><a href="http://mysite.com/">MENU3</a>
</li>
<li><a href="http://mysite.com/">MENU4</a>
</li>
<li class="multiple"><a href="#">MENU5<span></span></a>
<ul class="subnav">
<li><a href="http://mysite.com/">submenu1</a></li>
<li><a href="http://mysite.com/">submenu2</a></li>
</ul>
</li>
<li><a href="http://mysite.com/">MENU6</a>
</li>
<li><a href="http://mysite.com/">MENU7</a>
</li>
</ul>
</div>
</div>
<!-- // Header -->
<div class="clear"></div>
<!-- Wrapper -->
<div id="wrapper">
<!-- // Main content (left column) -->
<!-- Sidebar (right column) -->
<div id="sidebar">
</div>
<!-- // Sidebar (right column) -->
<div class="clear"></div> </div>
<!-- // Wrapper -->
<!-- Footer -->
<div class="clear"></div>
<div id="footer">
</div>
<!-- // Footer -->
</body>
</html>
如果有任何帮助，我们将不胜感激。
PS 另一个问题是在 IE7 中 - 当我将光标从菜单名称移动到子菜单 block 时 - 子菜单 block 消失，就好像 :hover 效果丢失一样。
最佳答案
尝试将 white-space: nowrap 添加到您的子导航链接 - DEMO
#second_menu .subnav li a {
color: #868686;
padding: 10px;
display: block;
font-weight: normal;
white-space: nowrap; /* this */
}
关于绝对定位下拉菜单的CSS宽度和IE7问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12410664/