Question

我的下拉框有问题。不知怎的，我设法创建了一个导航栏，然后添加了键。我在“关于”窗口上打了一个下拉框。它似乎工作。但我有与下拉框有关的问题。我在创建第二个下拉框时遇到问题。它有时会改变导航栏。错误定位位置和其他类型的错误。你能告诉我一个“HOME”按钮下拉框的例子吗？这是我的代码。 plzzz帮帮我。

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

Answer 1

在这里，您会看到'。dropdown-content css隐藏GroupStyle标签的显示

x:Bind

然后悬停

<a>

试试这段代码

.dropdown-content {  
          position: absolute;  
          display: none;       <-----------------  hide  contents  
          background-color: black;
          color: white;           
}

Answer 2

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;
  display:block;
  padding:10px 16px;
}
.dropdown-content a:hover{
  background-color:red;/*font-color will be red*/
}
/*added lines ends here*/

.paragraphs { 
    text-align: center;
}

<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">
  
	      <a href="#Server.html">Server</a>
		  <a href="#hahahaha.html">Origins</a>
		  
	     </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>

这里是jsfiddle：demo

HTML下拉框

2 个答案: