如何做下拉列表

我想使我的网站与HTML水平下拉列表& css，我只是不能做到这一点我尝试在列表和表上，但它没有奏效。有人可以给我这个代码或教我如何做到这一点？如何做下拉列表

这里是我的代码：

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<ul> 
 
    <li class="lo" style="float:right"><a href="">try</a></li> 
 
    <li class="lo"><a href=""> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn">Dropdown</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div></a></li> 
 
    <li class="lo"><a href="">try</a></li> 
 
    <li class="lo"><a href="">try</a></li> 
 
    <li class="lo"><a href="">try</a></li> 
 
</ul>

来源

2016-11-16 U.azar

这是你要实现的目标是什么？ http://codepen.io/anon/pen/WoGXeM

<!DOCTYPE html> 
     <head> 
     <title>dropdown list</title> 
    <style> 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    top: 50px; 
    left: 0; 
    white-space: nowrap; 
    height: auto; 
} 

.dropdown-content a { 
    color: black; 
    padding: 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content .column { 
    display: inline-block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 
    </style> 
     </head> 
     <body> 
     <ul> 
     <li class="lo" style="float:right"><a href="">try</a></li> 
     <li class="lo"> 
     <div class="dropdown"> 
    <button class="dropbtn">Dropdown</button> 
    <div class="dropdown-content"> 
    <div class="column"> 
     <a href="#"><strong>Link 1 Heading</strong></a> 
     <a href="#">Link 1</a> 
     <a href="#">Link 1</a> 
    </div> 
    <div class="column"> 
     <a href="#"><strong>Link 2 Heading</strong></a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 2</a> 
    </div> 
    <div class="column"> 
     <a href="#"><strong>Link 3 Heading</strong></a> 
     <a href="#">Link 3</a> 
     <a href="#">Link 3</a> 
    </div> 
    </div> 
</div></li> 
     <li class="lo"><a href="">try</a></li> 
     <li class="lo"><a href="">try</a></li> 
     <li class="lo"><a href="">try</a></li> 
    </ul> 
     </body> 
    </html>

来源

2016-11-16 11:15:08

不一样，当你将鼠标悬停在全球最大拍卖网站时尚这个词（http://www.ebay.com/）我想是这样的 –

哦，等等！是工作！但它可以像ebay –

@ U.azar列表我已经更新了我的答案http://codepen.io/anon/pen/WoGXeM –

如何做下拉列表

回答

相关问题