HTMLを使用してテーブルにドロップダウンを追加する

誰でも私を助けることができます。本当にHTMLのコンテンツを隠すことはできませんか？HTMLを使用してテーブルにドロップダウンを追加する

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Home</title> 
 

 
    <style type="text/css"> 
 
    #section1 { 
 
     width: 100%; 
 
    } 
 
    #LinkBar { 
 
     width: 100%; 
 
     padding-left: 5%; 
 
     padding-right: 5%; 
 
    } 
 
    h1 { 
 
     text-align: center; 
 
     font-size: 30px; 
 
     background-color: red; 
 
     width: 100%; 
 
    } 
 
    .menubar { 
 
     text-decoration: none; 
 
     color: white; 
 
    } 
 
    #logo { 
 
     display: block; 
 
     margin: auto; 
 
    } 
 
    span:hover { 
 
     color: black; 
 
    } 
 
    a:hover { 
 
     color: black; 
 
    } 
 
    #dropdown { 
 
     position: relative; 
 
     display: inline-block; 
 
    } 
 
    #dropdown-content { 
 
     display: none; 
 
     position: absolute; 
 
     background-color: #FF0000; 
 
     min-width: 160px; 
 
     padding: 12px 16px; 
 
    } 
 
    #dropdown:hover, 
 
    #dropdown-content { 
 
     display: block; 
 
    } 
 
    </style> 
 

 
    <link href="menubar.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <section id="section1"> 
 
    <img src="logo.png" id="logo" alt="LOGO" height="243" width="480" /> 
 

 

 
    <h1> 
 
<table id="LinkBar"> 
 
<tr> 
 
<td><a href="homepage.html" class="menubar">Home</a></td> 
 
<td><a href="menu.html" class="menubar">Menu</a></td> 
 
<td><a href="delivery.html" class="menubar">Delivery</a></td> 
 
<td><a href="promotion.html" class="menubar">Promotion</a></td> 
 

 
<td> 
 
    <div id="dropdown"> 
 
     <span class="menubar">About Us</span> 
 
     <div id="dropdown-content"> 
 
      <a href="Our History.html" class="menubar">Our History</a> 
 
      <a href="Our History.html" class="menubar">Nutritional</a> 
 
      <a href="Our History.html" class="menubar">Achievement</a> 
 
     </div> 
 
    </div> 
 
</td> 
 
    
 
<td><a href="storefinder.html" class="menubar">Store Finder</a></td> 
 
</tr> 
 
</table> 
 
</h1> 
 
    </section> 
 

 

 
</body> 
 

 
</html>

私は、HTMLの初心者です。私は多くの時間をかけて問題を発見しようとしました。しかし、それは動作しません、私は本当に誰もが（TT）を、それを解決するために私を助けることができることを願っています

出典

2016-03-19 Teow zhi tong

レイアウト用にテーブルを使用しない方が良いでしょう。ここでは、[リスト項目とCSSを使った単純なドロップダウンメニュー]（https://stackoverflow.com/questions/15687057/simple-dropdown-menu）に関する質問があります。リスト項目をインデントされるのではなく真っ直ぐにするためにスタイリングを行う必要がありますが、それは実行可能です。 – BSMP

使用ドロップダウンのために、このコード：

<div id="dropdown"> 

    <ul style="list-style-type:none"><li><span class="menubar">About Us</span> 
    <ul style="list-style-type:none"> 
    <li><a href="Our History.html" class="menubar">Our History</a></li> 
    <li><a href="Our History.html" class="menubar">Nutritional</a></li> 
    <li><a href="Our History.html" class="menubar">Achievement</a></li> 
    </ul> 
    </li> 
    </ul>  
    </div>

もUL要素、li要素のスタイルタグに以下のCSSを追加：

ul li { 
position: relative; 
} 

ul ul { 
position: absolute; 
display: none; 
} 

ul > li:hover ul { 
display: block; 
position: absolute; 
background-color: #FF0000; 
}

出典

2016-03-19 18:12:03

HTMLを使用してテーブルにドロップダウンを追加する

答えて

関連する問題