鼠標懸停，css轉換和下拉菜單麻煩

我的菜單有一個文本轉換樣式，當我懸停在我的菜單上並將鼠標懸停在下拉菜單上消失，但下拉列表中的文本在消失後有延遲，就好像，它必須在文本消失後完成文本過渡樣式。鼠標懸停，css轉換和下拉菜單麻煩

嗯我該怎麼辦？ :)

<head> 
<style type="text/css"> 
body{font-family:HelveticaLTStd-Light;} 
table{font-size:80%} 
a{color:#f0f0f0;text-decoration:none; 
-o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
} 
a:hover{color:#006600;} 
font-family:HelveticaLTStd-Light; 
td.menu{background:#DEB887} 
table.menu 
{ 
font-size:100%; 
color:#f0f0f0; 
position:absolute; 
visibility:hidden; 
background:#558800; 
opacity:0.9; 
} 
body { 
background:url(wall.jpg) no-repeat fixed center; 
} 
table 
{ 
border-collapse:collapse; 
} 
table, td, th 
{ 
position:relative; 
} 
</style> 
<script type="text/javascript"> 
function showmenu(elmnt) 
{ 
document.getElementById(elmnt).style.visibility="visible"; 
} 
function hidemenu(elmnt) 
{ 
document.getElementById(elmnt).style.visibility="hidden"; 
} 
</script> 
</head> 

<body> 
<div id="header"> 
<br> 
<br><table border="0" align="center"> 
<tr> 
    <th align="left" width="430"><font color="cccccc" face="HelveticaLTStd-Light" size="15">C-Ann Trading</font><br> 
    <font color="#f0f0f0" size="5">and Computer Services </font> </th> 
    <th width="120" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3"><a href="index.html">Home</a></font></th> 
    <th width="120" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3"><a href="about.htm">About Us</a></font></th> 
    <th width="120" onmouseover="showmenu('products')" onmouseout="hidemenu('products')" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3" color="#f0f0f0">Products</font> 
     <table border="1" class="menu" id="products" width="150"> 
     <tr><th align="left" class="menu"><a href="notebook.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNotebooks</a></tr></th> 
     <tr><th align="left" class="menu"><a href="monitor.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspMonitors</a></tr></th> 
     <tr><th align="left" class="menu"><a href="component.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspComponents</a></tr></th> 
     <tr><th align="left" class="menu"><a href="software.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSoftwares</a></tr></th> 
     <tr><th align="left" class="menu"><a href="peripheral.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspPeripherals</a></tr></th> 
     <tr><th align="left" class="menu"><a href="network.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNetworking</a></tr></th> 
     <tr><th align="left" class="menu"><a href="storage.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspStorage Devices</a></tr></th>

來源

2013-02-14 Dhan

這裏是產品選項卡上的演示 - cann.net78.net – Dhan 2013-02-14 14:55:03

Gah！你爲什麼要把''標籤與CSS混合？此外，請正確縮進您的代碼 – Bojangles 2013-02-14 15:16:04

鼠標懸停，css轉換和下拉菜單麻煩

回答

相關問題