使用HTML在表格中添加下拉列表

时间:2016-03-19 16:23:15

标签: 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>
&#13;
&#13;
&#13;

我是HTML的初学者。我花了很多时间试着找出问题所在。但它不起作用,我真的希望任何人都能帮助我解决它(T.T)

1 个答案:

答案 0 :(得分:0)

将此代码用于下拉列表:

$scope

还在ul和li元素的样式标记中添加下面的css:

    <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>