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

【问题标题】：CSS width of absolute positioned drop down menu and IE7 issue绝对定位下拉菜单的 CSS 宽度和 IE7 问题
【发布时间】：2012-09-06 19:13:14
【问题描述】：

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

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

这就是现实：

这是我需要得到的：

这是我的 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>

希望能对此提供任何帮助。

另外一个问题是在 IE7 中 - 当我将光标从菜单名称移动到子菜单块时 - 子菜单块消失，好像 :hover 效果丢失了。

【问题讨论】：

我把它放在一个 jsfiddle 给你jsfiddle.net/EUj69/1

标签： css drop-down-menu width css-position

【解决方案1】：

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

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

编辑：IE7 修复

【讨论】：

谢谢你的提议，但是当你从#second_menu li 中删除 position:relative 时——在 IE7 中，子菜单开始显示在页面的左上角——这基本上就是我添加这个的原因。我还发现，对于元素的 ABSOLUTE 定位，您需要一个位置不是静态 + 的父元素，您需要使用顶部和左侧参数而不是边距。
这是margin-left，而不是margin，抱歉。我添加了一个 IE 修复
感谢您，使用您的解决方案 - 我仍在为 IE7 中的 2 个问题苦苦挣扎：多个菜单和单个菜单（无下拉菜单）的级别不同 - 多个菜单更高一点（这个当我将 display: block 添加到 #second_menu li a) 时发生。另一个问题是，当您将鼠标悬停在子菜单链接上时 - 绿色背景仅覆盖文本，而不是子菜单的整个宽度。尝试使用宽度 - 但没有结果。两者都只存在于 IE7 问题中。
恐怕我帮不了你。但我想很多人不会注意到这一点，因为现在世界上只有 1.8% 的人使用 IE7。 w3schools.com/browsers/browsers_explorer.asp
非常感谢您的帮助，基本上您的解决方案效果也很好，但是使用 nowrap 的第二个要简单得多 - 我改用它。不幸的是，我不能将两者都标记为解决方案。

【解决方案2】：

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

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

【讨论】：

感谢这个简单的解决方案。这似乎解决了子菜单链接宽度的问题。当您将光标从菜单名称移动到子菜单块时，您是否知道如何解决 IE7 问题 - 它就像 :hover 丢失一样消失？
@Volder 无法重现该问题 - jsfiddle.net/dGV2V/1 您可以编辑小提琴以复制它吗？
fiddle 不支持浏览器兼容性，至少我没有找到任何 - 我为此目的使用 IETester（检查 IE7），无论如何我只是为 IE7 和下拉菜单添加了特殊的 css只是更高，悬停不会丢失。