使用HTML在表中添加下拉列表
使用HTML在表中添加下拉列表
提问于 2016-03-19 16:23:15
任何人都可以帮我，我真的不能用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的初学者。我花了很多时间试着找出问题。但这行不通，我真的希望任何人都能帮我解决这个问题(T.T.)
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-19 18:12:03
在下拉列表中使用以下代码：
<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36104129
复制相关文章
相似问题
腾讯云开发者
