Home/ Questions/Q 933693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T20:52:33+00:00

I have a menu that contains submenus. Its HTML source looks like this: <ul

  • 0

I have a menu that contains submenus. Its HTML source looks like this:

<ul id="menu">
  <li>
    <a href="javascript:;">Menu 1</a>
    <ul>
      <li><a href="javascript:;">Item 1<a></li>
      <li>
        <a href="javascript:;">Subitem 1</a>
        <ul>
          <li><a href="javascript:;">Subsubitem 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

After applying some CSS and getting the JavaScript side of things in order with Superfish, the menu looks like this in the browser:

The menu

The second menu item is too big to fit into its space, so the remainder of the text is rendered onto the text of the next menu item. Is there a way to enlarge the <ul> to make sure that the text fits?

Update: here’s the relevant CSS code:

ul#menu {
    position: relative;
    top: 160px;
    left: 130px;
    width: 700px;
}
ul#menu, ul#menu ul {
    list-style-type: none;
}
ul#menu > li {
    display: block;
    float: left;
    background: url(img/menuitem.png) top left;
    width: 104px;
    height: 37px;
    margin-right: 5px;
    text-align: center;
}
ul#menu > li:hover {
    background-position: bottom left;
}
ul#menu > li > a {
    height: 100%;
    padding-top: 10px;
    font-size: 80%;
    font-weight: bold;
    color: white;
}
ul#menu > li > a, ul#menu > li > ul a {
    display: block;
    text-decoration: none;
}
ul#menu > li ul {
    min-width: 150px;
}
ul#menu > li > ul li {
    color: black;
    font-size: 10pt;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    line-height: 30px;
    background: url(img/menubg.png) repeat;
}
ul#menu > li > ul li:hover {
    background-color: #9c938c;
}
ul#menu > li > ul a {
    color: black;
}
ul#menu > li ul {
    position: relative;
    top: -10px;
}
ul#menu > li li.hoverItem > ul {
    position: relative;
    top: -30px;
}
ul#menu > li > a > span.sf-sub-indicator {
    display: none;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
    float: right;
    margin-right: 5px;
}

span.sf-sub-indicator and li.hoverItem are used by Superfish. sf-sub-indicator is used to indicate that hovering over a menu item will cause a submenu to be opened like so:

<li>
  <a href="javascript:;" class="sf-with-ul">Menu item with submenu<span class="sf-sub-indicator"> »</span></a>
  <ul>
    <!-- Etc -->
  </ul>
</li>

li.hoverItem is applied to all menu items you passed to get to the menu where your mouse is positioned, plus the menu item your mouse is currently hovering on.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I put something together using the same css definitions that you posted above. This works for me – automatically detects the size of the largest element and adjusts the related CSS.

    You’ll need to adjust the li elements to have a predictable naming scheme, so that it can find the largest one. Depending on your font, you might need to adjust the *5 portion of the assignment for the newSize.

    <html>
  <head>
    <title></title>
    <meta content="">
<script type="text/javascript">
function changeSize() {
  var html = document.getElementById("item"+1).innerHTML;
  var newSize = html.length*5;
  var num_menu_items = 3;
  for (i=2; i<=num_menu_items; i++) {
    var temp = document.getElementById("item"+i).innerHTML;
    if (temp.length > newSize / 5)
        newSize = temp.length*5;
  }
  var theRules = new Array();
  var rule;
  if (document.styleSheets[0].cssRules)
    theRules = document.styleSheets[0].cssRules
  else if (document.styleSheets[0].rules)
    theRules = document.styleSheets[0].rules
  for (i = 0; i<theRules.length; i++) {
    if (theRules[i].selectorText.indexOf("ul#menu > li ul") > -1) {
      rule = theRules[i];
    }
  }
  rule.style.setProperty('min-width',newSize+"px",null);
}
</script>
  </head>
  <body onload='changeSize();'>
<ul id="menu">
  <li>A-one</li>
  <li>A-two</li>
  <li>A-three
    <ul>
      <li id='item1'>B-one</li>
      <li id='item2'>B-two-is-really-really-really-really-really-really-really-really-really-really-really-really long</li>
      <li id='item3'>B-three</li>
    </ul>
  </li>

</ul>
</body>
</html>
    • 0