我的下拉框有问题。我以某种方式设法创建了一个导航栏，然后向其中添加了键。我在“关于”窗口上做了一个下拉框。它似乎有效。但我有与下拉框相关的问题。我在创建第二个下拉框时遇到问题。它有时会改变导航栏。 放错位置和其他类型的错误。你能给我看一个“主页”按钮上的下拉框的例子吗？这是我的代码。请帮助我。
/* Building navigation bar */
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
padding: 14px 20px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline;
}
/* Building about dropdown and the dropdown content */
.container {
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
display: none;
background-color: black;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*added lines*/
.dropdown-content a {
text-decoration: none;
color: white;
text-align: center;
}
.dropdown-content a:hover {
background-color: red;
/*font-color will be red*/
}
/*added lines ends here*/
.paragraphs {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#file:///C:/Users/Nabil/Desktop/web/YouBox/main.html#style.html">Home</a>
</li>
<li><a href="news.html">News</a>
</li>
<div class="dropdown">
<li><a href="#about.html">About</a>
</li>
<div class="dropdown-content">
<ul>
<a href="#Server.html">Server</a>
<a href="#hahahaha.html">Origins</a>
</ul>
</div>
</div>
</ul>
<hr>
<p class="paragraphs"><strong>mymash.com<br>
Top vs games - pictures in Bahrain! <br>
Who looks mind blowing? Lets see, Vote your favourite photo!</strong>
<br>or you can add new pictures of yourself to challenge someone <a href="#test">HERE!</a>
</p>
<hr>
</body>
</html>最佳答案
在这里你看到 '.dropdown-content css 隐藏了 <a> 的显示标签
.dropdown-content {
position: absolute;
display: none; <----------------- hide contents
background-color: black;
color: white;
}
然后悬停
.dropdown:hover .dropdown-content {
display: block; <---- make visible the contents
}
li a:hover {
background-color: red; <---- change the background color to red
}
试试这段代码
<!DOCTYPE html>
<html>
<head>
<style>
/* Building navigation bar */
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
padding: 14px 20px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline;
}
/* Building about dropdown and the dropdown content */
.container {
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
display: none;
background-color: black;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*added lines*/
.dropdown-content a{
text-decoration:none;
color: white;
text-align: center;
position: relative;
display: inline-block;
}
.dropdown-content a:hover{
background-color:red;/*font-color will be red*/
}
/*added lines ends here*/
.paragraphs {
text-align:center;
}
</style>
</head>
<body>
<ul>
<div class="dropdown">
<li><a href="#file:///C:/Users/Nabil/Desktop/web/YouBox/main.html#style.html">Home</a></li>
<div class="dropdown-content"><ul>
<a href="#page1.html">item1</a>
<a href="#page2.html">item2</a>
</ul>
</div>
</div>
<li><a href="news.html">News</a></li>
<div class="dropdown">
<li><a href="#about.html">About</a></li>
<div class="dropdown-content"><ul>
<a href="#Server.html">Server</a>
<a href="#hahahaha.html">Origins</a>
</ul>
</div>
</div>
</ul>
<hr>
<p class="paragraphs"><strong>mymash.com<br>
Top vs games - pictures in Bahrain! <br>
Who looks mind blowing? Lets see, Vote your favourite photo!</strong><br>
or you can add new pictures of yourself to challenge someone <a href="#test">HERE!</a></p>
<hr>
</body>
</html>关于HTML 下拉框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39992573/