html - 纯 CSS 下拉菜单需要第二列

Question

我需要一些帮助。我无法在第一个主“授权品牌”菜单中添加第二列。我能够将其分解，但随后其余列被更改，因为这是width针对1000px.

我的代码：

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  padding: 6px 13px 6px 13px;
  background: #666666;
  white-space: nowrap;
}

ul li a:hover {
  background: #3b3b3b;
  color: #D3AE76;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #3b3b3b;
}

li:hover li a:hover {
  background: #999999;
}

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="images/goldnavline.jpg"><img src="images/goldnavline.jpg" width="1" height="1"></td>
  </tr>
  <tr>
    <td bgcolor="#666666">
      <ul id="menu">
        <li><a href="#">AUTHORIZED Watch Brands</a>
          <ul>
            <li><a href="#">Alain Silberstein Watches</a></li>
            <li><a href="#">Armin Strom Watches</a></li>
            <li><a href="#">Artya Watches</a></li>
            <li><a href="#">Audemars Piguet Watches</a></li>
            <li><a href="#">Ball Watches</a></li>
            <li><a href="#">Bell & Ross Watches</a></li>
            <li><a href="#">Blancpain Watches</a></li>
            <li><a href="#">Bovet Watches</a></li>
            <li><a href="#">Breguet Watches</a></li>
            <li><a href="#">BRM Watches</a></li>
            <li><a href="#">Corum Watches</a></li>
            <li><a href="#">DeWitt Watches</a></li>
            <li><a href="#">Dodane Watches</a></li>
            <li><a href="#">Franck Muller Watches</a></li>
            <li><a href="#">Girard Perregaux Watches</a></li>
            <li><a href="#">Glashutte Original Watches</a></li>
            <li><a href="#">Graham Watches</a></li>
            <li><a href="#">Hautlence Watches</a></li>
            <li><a href="#">H. Moser & Cie Watches</a></li>
            <li><a href="#">Hublot Watches</a></li>
            <li><a href="#">Jaquet Droz Watches</a></li>
            <li><a href="#">Linde Werdelin Watches</a></li>
            <li><a href="#">Muhle Glashutte Watches</a></li>
            <li><a href="#">Omega Watches</a></li>
            <li><a href="#">Parmigiani Fleurier Watches</a></li>
            <li><a href="#">Perrelet Watches</a></li>
            <li><a href="#">Romain Jerome Watches</a></li>
            <li><a href="#">Speake-Marin Watches</a></li>
            <li><a href="#">Strom Watches</a></li>
            <li><a href="#">Urwerk Watches</a></li>
          </ul>
        </li>
        <li><a href="#">PRE-Owned Timepieces</a>
          <ul>
            <li><a href="#">PRE-OWNED Timepieces $5000 and Below</a></li>
            <li><a href="#">PRE-OWNED Timepieces $5000 to $10000</a></li>
            <li><a href="#">PRE-OWNED Timepieces $10000 to $15000</a></li>
            <li><a href="#">PRE-OWNED Timepieces $15000 and Up</a></li>
          </ul>
        </li>
        <li><a href="#">CLEARANCE Timepieces</a></li>
        <li><a href="#">Timepiece Accessories</a>
          <ul>
            <li><a href="#">Orbita Watch Winders</a></li>
            <li><a href="#">Kubik Watch Winders</a></li>
          </ul>
        </li>
        <li><a href="#">Trade In YOUR Timepiece</a></li>
      </ul>
    </td>
  </tr>
  <tr>
    <td background="images/goldnavline.jpg"><img src="images/goldnavline.jpg" width="1" height="1"></td>
  </tr>
</table>

Answer 1

将您的子菜单设为

ul li ul{
position:absolute
  }

which wont affect your cols.