HTML下拉问题

html drop down issues

本文关键字：问题 HTML      更新时间：2023-09-26

好了。我正在努力扩大我的html, css和javascript知识。为了做到这一点，我开始写一些基本的网站设计(在一个实时服务器上，但都是虚构的)。在我最近的一个中，我决定使用下拉菜单。为了适当地分隔这一切，我决定使用表元素，并使用一些非常基本的(这是我现在所知道的)javascript。我目前使用。下拉和。下拉:悬停使我的菜单工作。但是，由于我使用了table元素，每次我在测试页面上"下拉"菜单时，其他菜单标题都会调整到下拉窗口的大小。有什么办法解决这个问题吗?这是我的代码....

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>

你似乎已经猜到了:不要使用表，除了语义上不正确(<table>是指有数据的表)，它给你各种其他问题，因为他们的默认样式。

使用一个直接的(嵌入式)ul和位置子菜单绝对，确保使顶级菜单项(li) position: relative;和display: inline-block;，它应该是相当直接的从那里。

实现这一点的一种方法是在你的td{}样式中给出一个特定的高度，如'height: 50px'，并浮动它们为'float: left'。可能不是最好的选择，但它似乎完成了它。

如果您希望使用纯javascript。应该没问题。

<html>
<head>    
    <style type="text/css">

    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;
        }   
.dd1,.dd2{display:none;}
    </style>
    <title>Discount Electronics</title>
</head>
<body>
    <div style="text-align: center">
    <img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
    </div>
    <table>
<tr>
    <td onmouseover="fun('dd1')">    Search By Department</td>
    <td  onmouseover="fun('dd2')">    Search by Company</td>
</tr>
<tr><td>
<div class='dd1 dropdown'>
<h1>
    <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>
</div>
</td>
<td>
<div class='dd2 dropdown'>
<h1>
    <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>
</div>
</td></tr>
</table>
<script type='text/javascript'>
function fun(cls){
var arr=document.getElementsByClassName('dropdown');
for(i=0;i<arr.length;i++)
{
arr[i].style.display='none';
}
document.getElementsByClassName(cls)[0].style.display='block'
}
</script>
</body>
</html>
相关文章：