Home/ Questions/Q 8534379
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:10:57+00:00

how can I automatically define width of drop down menu depending on the contained

  • 0

how can I automatically define width of drop down menu depending on the contained links length:

Here are pictures of what I have and what I want:

This is reality:

enter image description here

This is what I need to get:

enter image description here

Here is my html and css (I reduced the HTML as much as possible – just left the menu):

<!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>

Would appreciate any help with this.

PS another issue is in IE7 – when I move cursor from menu name to submenu block – the submenu block dissapears as if :hover effect is lost.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try to add white-space: nowrap to your subnav links – DEMO

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