Question

我是一个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>

Answer 1

这对您有帮助吗？

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>

Answer 2

我没有对您的代码进行太多更改，仅对某些设计和动态进行了更改。请稍后对您的代码进行排序，这有点令人困惑。

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;
    padding-top: 10px;
}

.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
}

.float-right{
    margin-left: 60%
}

.dropbtn {
    background-color: #464;
    border-radius: 5px;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

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

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

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

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

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

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

HTML

<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>
<header> 
    <div class="row" style="">
        <div class="logo">
                <img src="fr.png">   
        </div>     

        <div class="float-right">
            <!-- ++++++++ Home -->
            <button class="dropbtn">Home</button> 

            <!-- ++++++++ About -->
            <div class="dropdown">
                <button class="dropbtn">About</button>
                <div class="dropdown-content">
                    <a href="#">Link 4</a>
                    <a href="#">Link 5</a>
                    <a href="#">Link 6</a>
                </div>
            </div>

            <!-- ++++++++ Photos -->
            <div class="dropdown">
                <button class="dropbtn">Photos</button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>

            <!-- ++++++++ Contact -->
            <button class="dropbtn">Contact</button>

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

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

2 个答案: