Question

我为我正在帮助开发的网站编写了一个CSS菜单，它在IE 7和Firefox 3（在Windows XP上）都能正确显示。

预期的效果是下拉菜单应该与其中最宽的元素一样宽（但不能更宽）。然而，在Safari中，它们看起来大约是应有的两倍。我不清楚如何解决这个问题。有什么帮助吗？

HTML是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="mainContainer">
  <div id="mainNavContainer">
    <img id="leftNavImg" src="imgsrc.jpg" alt="ignore me for now" height="34" width="91">
    <div id="topNav">
      <ul>
        <li><a href="#">Menu Item 1</a><ul>
          <li><a href="#">Submenu Item 1.1</a></li>
          <li><a href="#">Submenu Item 1.2</a></li>
          <li><a href="#">Submenu Item 1.3</a></li>
        </ul></li>
        <li><a href="#">Menu Item 2</a><ul>
          <li><a href="#">Submenu Item 2.1</a></li>
          <li><a href="#">Submenu Item 2.2</a></li>
          <li><a href="#">Submenu Item 2.3</a></li>
        </ul></li>
        <li><a href="#">Menu Item 3</a><ul>
          <li><a href="#">Submenu Items may have different lengths</a></li>
          <li><a href="#">short</a></li>
          <li><a href="#">or potentially moderately long</a></li>
          <li><a href="#">The submenu should be as wide as its longest item</a></li>
        </ul></li>
        <li><a href="#">etc...</a><ul>
          <li><a href="#">Submenu Item 4.1</a></li>
          <li><a href="#">Submenu Item 4.2</a></li>
          <li><a href="#">Submenu Item 4.3</a></li>
        </ul></li>
      </ul>
    </div>
  </div>
</div>
</body>

，CSS是

  * {
    margin: 0;
    padding: 0;
  }
  ul, ol, dl, li, dt, dd {
    list-style: none;
  }
  body {
    background-color: #fff;
    margin: 20px;
    text-align: center;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
  }

  #mainContainer {
    width: 975px;
    background-color: #fff;
    text-align: left;
    margin: 0 auto;
    position: relative;
    padding-top: 52px;
  }
  #mainNavContainer {
    height: 34px;
    font-size: 11px;
    width: 973px;
    border: 1px solid #dedede;
    background-color: #888;
    position: absolute;
    top: 0;
    color: #000;
  }
  #mainNavContainer #leftNavImg {
    padding: 0 20px 0 7px;
    float:left;
    border-right:1px solid #dedede;
  }

  #topNav {
    float: left;
  }
  #topNav ul {
    display: inline;
    text-align: center;
  }
  #topNav li {
    display: block;
    float: left;
    position: relative;
    border-right: 1px solid #DEDEDE;
    width: 102px;
  }
  #topNav li ul {
    display:none;
    border-bottom: 4px solid #422952;
    position:absolute;
    top: 35px;
    left:0px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    z-index:100;
  }
  #topNav li li {
    display:block; 
    border-right: none;
    border-bottom: 2px solid #622952;
    background-color:#FBFBFB;
    width: 100%;
    font-size: 12px;
  }
  #topNav li a, #topNav form {
    text-decoration: none;
    display:block;
    color: #000;
    padding: 11px 6px;
  }
  #topNav li li a {
    padding: 9px 6px;
    color: #666;
    width: 100%;
  }
  #topNav a:hover {
    color: #fff;
    background-color: #824972;
  }
  #topNav li:hover ul {
    display:block; 
    z-index:100;
  }
  #topNav li li a:hover {
    background-image:none;
    background-color:#fff;
    color: #000;
  }

Answer 1

移动

white-space: nowrap;

这

#topNav li ul { ...

到

#topNav li li a { ...

喝彩！

CSS菜单在Safari中显示不正确

1 个答案: