Question

如何根据所包含的链接长度自动定义下拉菜单的宽度：

以下是我拥有的和我想要的图片：

这是现实：

enter image description here

这是我需要得到的：

enter image description here

这是我的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中 - 当我将光标从菜单名称移动到子菜单块时 - 子菜单块消失，就好像：悬停效果丢失了。

Answer 1

尝试将white-space: nowrap添加到您的子空间链接 - DEMO

#second_menu .subnav li a {
    color: #868686;
    padding: 10px;
    display: block;
    font-weight: normal;
    white-space: nowrap; /* this */
}

Answer 2

从position: relative中删除#second_menu li 从top: 39px;中删除left: -10px;和#second_menu ul.subnav 将margin-left:-10px添加到#second_menu ul.subnav
将display:block;添加到#second_menu li a

演示：
http://jsfiddle.net/EUj69/10

编辑：IE7修复

CSS宽度绝对定位下拉菜单和IE7问题

2 个答案: