0

含まれているリンクの長さに応じて、ドロップダウンメニューの幅を自動的に定義するにはどうすればよいですか。

これが私が持っているものと私が欲しいものの写真です：

これは現実です：

ここに画像の説明を入力してください

これは私が取得する必要があるものです：

ここに画像の説明を入力してください

これが私の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にあります-カーソルをメニュー名からサブメニューブロックに移動すると-サブメニューブロックは：hover効果が失われたかのように消えます。

4

2 に答える 2

3

white-space: nowrapsubnavリンクに追加してみてください-デモ

#second_menu .subnav li a {
    color: #868686;
    padding: 10px;
    display: block;
    font-weight: normal;
    white-space: nowrap; /* this */
}
于 2012-09-13T16:40:34.143 に答える
1

[削除]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の修正

于 2012-09-13T16:40:25.070 に答える