Question

我有一个包含子菜单的菜单。它的HTML源代码如下：

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

应用一些CSS并使用Superfish按顺序获取JavaScript方面后，菜单在浏览器中显示如下：

The menu http://img838.imageshack.us/img838/1288/menu.jpg

第二个菜单项太大而无法放入其空间，因此文本的其余部分将呈现在下一个菜单项的文本上。有没有办法放大<ul>以确保文本适合？

更新：这是相关的CSS代码：

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;
}

Superfish使用

span.sf-sub-indicator和li.hoverItem。 sf-sub-indicator用于表示将鼠标悬停在菜单项上会导致子菜单被打开，如下所示：

<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适用于您传递到鼠标所在菜单的所有菜单项，以及鼠标当前悬停的菜单项。

Answer 1

好的，我使用您在上面发布的相同css定义将一些内容放在一起。这对我有用 - 自动检测最大元素的大小并调整相关的CSS。

您需要调整li元素以具有可预测的命名方案，以便它可以找到最大的命名方案。根据您的字体，您可能需要调整newSize的分配的*5部分。

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

Answer 2

这个块在这里：

ul#menu > li ul {
    min-width: 150px;
}

该项目的大小是在哪里。你必须把它改成更大的东西。它不扩展的原因是因为它的父宽度小于它。

拟合<ul>的宽度以容纳菜单项</ul>

2 个答案: