javascript - html下拉问题

Question

好的，开始吧。我正在努力扩展我的 html、css 和 javascript 知识。为此，我开始编写一些基本的网站设计(在实时服务器上，但都是伪造的)。在我最近的一个中，我决定使用下拉菜单。为了适本地隔开这一切，我决定使用一个表格元素，并使用一些非常基本的(这是我现在所知道的)javascript。我目前正在使用 .dropdown 和 .dropdown:hover 来使我的菜单正常工作。但是，由于我使用了表格元素，每次我在测试页面上“下拉”我的菜单时，其他菜单标题都会调整为下拉窗口的大小。任何想法如何解决这个问题？这是我的代码....

CSS

    .dropdown ul {
        display: none
    }
    .dropdown:hover ul {
        display: block;
        background-color: white;
    }
    body {
        margin: 0;
        padding: 0;
        background: -moz-linear-gradient(AliceBlue, White);
        background: -webkit-linear-gradient(AliceBlue, White);
        background: linear-gradient(AliceBlue, White);
    }
    table {
        align: center;
        font-family: cursive;
        font-decoration: underline;
    }
    td {
        border: solid 1px Lavender;
        padding: 4px;
        margin-left: 6px;
        margin-right: 6px;
        cell-spacing: 6px;
    }
    h1 {
        font-size: 14px;
    }

HTML

<div style="text-align: center">
    <img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
    <td class="dropdown">
        <h1>
        Search By Department
        <ul>
        <li><a href="FILLER">Computers and Laptops</a>
        <li><a href="FILLER">Computer Components</a>
        <li><a href="FILLER">Office Supplies</a>
        <li><a href="FILLER">Phones and PDAs</a>
        <li><a href="FILLER">Speakers and Audio</a>
        <li><a href="FILLER">Tablets and Ipads</a>
        </h1>
    </td>
    <td class="dropdown">
        <h1>
        Search by Company
        <ul>
        <li><a href="FILLER">ACER</a></li>
        <li><a href="FILLER">AMD</a></li>
        <li><a href="FILLER">APPLE</a></li>
        <li><a href="FILLER">BELKIN</a></li>
        <li><a href="FILLER">BOSE</a></li>
        <li><a href="FILLER">COBY</a></li>
        <li><a href="FILLER">DELL</a></li>
        <li><a href="FILLER">HP</a></li>
        <li><a href="FILLER">HTC</a></li>
        <li><a href="FILLER">JVC</a></li>
        <li><a href="FILLER">LG</a></li>
        <li><a href="FILLER">PANASONIC</a></li>
        <li><a href="FILLER">SAMSUNG</a></li>
        <li><a href="FILLER">SONY</a></li>
        </h1>
    </td>

Answer 1

您似乎已经猜到了:不要使用表，除了语义不正确(<table> 用于包含数据的表)之外，由于它们的默认样式，它会给您带来各种其他问题。

使用直接(嵌入式)ul并绝对定位子菜单，确保使顶级菜单项 ( li ) position: relative;和 display: inline-block;从那里应该非常简单。