时间戳

首页 > 解决方案 > 如何在现有网站/导航上创建下拉菜单？

html - 如何在现有网站/导航上创建下拉菜单？

问题描述

我是一个 17 岁的男孩，最近刚开始使用 html 和 css，我一直在制作一个网站，我正在尝试在我现有的网站上添加一个下拉菜单，但我正在努力做到这一点，我想要一个下降我的照片选项卡上的下拉菜单，这样我就可以在“关于”选项卡中添加一些图片和一张，我尝试过不起作用，任何帮助将不胜感激和欢迎。提前致谢

*
{ 
    margin: 0;
    padding: 0;
}

header
{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
} 

.main-nav
{
  float: right; 
  list-style: none;
  margin-top: 30px;
}

.main-nav li
{
 display: inline-block;
} 

.main-nav li a
{
    color: white;
    text-decoration: none;
    padding; 5px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
}

.main-nav li.active a 
{
    border: 1px solid white;
}

.main-nav li a:hover
{
    border: 1px solid white;
}

.logo img
{
    width: 100px;
    height: auto;
    float: left;
}

body
{
    font-family: monospace;
}

.row
{
    max-width: 1200px
    margin: auto;
}

.hero
{
    position: absolute;
    width: 1000px;
    margin-left: 200px;
    margin-top: 0px;
    margin-right: 50px;
}

h1
{
    color: white;
    text-transform: uppercase;
    font-size: 70px;
    text-align: center;
    margin-top: 275px;
}

.button
{
    margin-top: 30px;
    margin-left: 330px;
}

.btn
{
    border : 1px solid white;
    padding: 10px 30px;
    color: white;
    text-decoration: none;
    margin-right: 5px;
    font-size: 13px;
    text-transform: uppercase
}

.btn-one
{
  background-color: darkblue;
  font-family: "Roboto", sans-serif;
}

.btn-two 
{
     font-family: "Roboto", sans-serif
}

.btn-two:hover
{
    background-color: darkblue
}
index.html 

<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
    
</head>
<body>
   <header> 
    
        <div class="row">
             <div class="logo">
             <img src="fr.png">
             </div>            
         <ul class="main-nav">
            <li class="active"><a href=""> HOME</a></li>    
            <li><a href=""> ABOUT</a></li>  
            <li><a href=""> PHOTOS</a></li>  
            <li><a href=""> CONTACT</a></li>  
        
         </ul>
       
         </div>
    
         <div class="hero">
         <h1>WELCOME!</h1>
             
             <div class="button">
                  <a href="" class="btn btn-one"> Watch video</a>
                  <a href="" class="btn btn-two"> Explore more</a>
             </div>
         </div> 
           
           
           
    </header>
    
    
    
</body>
    
</html>

标签： htmlcssdrop-down-menuweb

解决方案

这对你有帮助吗？

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Dropdown Button</h2>
  <p>Move the mouse over the button to open the dropdown content.</p>
  <div class="w3-dropdown-hover">
    <button class="w3-button w3-black">Hover Over Me!</button>
    <div class="w3-dropdown-content w3-bar-block w3-border">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

推荐阅读