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>
答案 0 :(得分:5)
您似乎已经猜到了:除了语义不正确(<table>
用于包含数据的表格)之外,不要使用表格,因为它们的默认样式,它会为您提供各种其他问题。
使用简单(嵌入)ul
并将子菜单置于绝对位置,确保制作顶级菜单项(li
)position: relative;
和display: inline-block;
应该从那里非常简单。
答案 1 :(得分:2)
实现这一目标的一种方法是在你的td {}样式中给出一个特定的高度,例如'height:50px',浮动它们'float:left'。可能不是最好的选择,但似乎可以实现它。
答案 2 :(得分:-1)
如果你想使用普通的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>