懸停鏈接顯示錶格包裝在divs和表

Question

好吧，所以我最近發佈了一個問題，但遇到了另一個問題。

我想做一個導航菜單，你把鼠標懸停在一個鏈接上，並顯示一張表。現在的問題是，在我的代碼中，鏈接被打包在兩個div中，一張表和我試圖展示的表也在整個shebang中。我做了一個示例代碼向您展示

小提琴鏈接：http://jsfiddle.net/ThobiasN/FJksb/24/

HTML代碼：

<div> 
    <div> 
     <table> 
      <tr> 
       <td><a class='nav' href='#'>Hover me</a></td> 
      </tr> 
      <tr> 
       <table> 
        <tr> 
         <td class='dropdown'><p>Show me</p></td> 
        </tr> 
       </table> 
      </tr> 
     </table> 
    </div> 
</div> 

CSS代碼：

div table tr td.dropdown 
{ 
    display:none; 
} 

div table tr td a.nav:hover + div table tr td.dropdown 
{ 
    display:block; 
} 

Answer 1

是否有你的CSS堅持任何理由而不是使用JavaScript？ JavaScript可能會使這更容易。但是，如果你想純粹使用CSS，我認爲你需要把你的表放到用戶必須懸停的項目中。因此，而不是你有你的問題是什麼，使用這樣的結構：

<div> 
    <div> 
     <table> 
      <tr> 
       <td> 
        <a class='nav' href='#'>Hover me 
         <table> 
          <tr> 
           <td class='dropdown'><p>Show me</p></td> 
          </tr> 
         </table> 
        </a> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

你會那麼需要適當樣式的<a>標籤，把鏈接文字中<span>標籤內，如果需要的話，這樣你就可以使它仍然看起來像一個鏈接。

的CSS實際上使菜單的工作將是這個樣子：

.nav:link .dropdown { 
    display: none; 
} 

.nav:hover .dropdown, .nav:active .dropdown { 
    display: block; 
} 

所有這一切都告訴瀏覽器要做的是使表歸類dropdown內的活動或徘徊nav鏈接出現，消失當它不活動或者被擱置時。

我創建an example here，只記住，我已經使用的<table>小號<div>！而非，雖然你可以把你的<table>的<div>內，我已經使用的類名menu和content分別代替nav和dropdown。

希望這會有所幫助。祝你好運。