文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML下拉框

问HTML下拉框
EN

Stack Overflow用户
提问于 2016-10-12 07:12:30
回答 2查看 301关注 0票数 0

我的下拉框有问题。不知怎么的，我设法创建了一个导航栏，然后给它添加了键。我在“关于”的窗户上做了一个下拉框。而且看起来很管用。但是我有与下拉框有关的问题。我在创建第二个下拉框时遇到了困难。有时还会改变导航栏。错位和其他类型的错误。你能给我举个"HOME“按钮上下拉框的例子吗？这是我的密码。plzzz帮我。

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<!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>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-10-12 07:22:57

在这里您可以看到‘.’下拉内容css隐藏了标记的显示

代码语言：javascript
复制
.dropdown-content {  
          position: absolute;  
          display: none;       <-----------------  hide  contents  
          background-color: black;
          color: white;           
}

则同时悬停

代码语言：javascript
复制
.dropdown:hover .dropdown-content { 
          display: block;  <----  make visible the contents  
}  
li a:hover { 
             background-color: red; <---- change the background color to red
}

试试这段代码

​

代码语言：javascript
复制
<!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>

​

票数 0
EN

Stack Overflow用户

发布于 2016-10-12 08:26:02

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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：演示

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39992573

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档