Hovering dropdown menu look

I'm trying to work on a website that someone created years ago... I have very little knowledge in coding so I'm really out of my comfort zone here and trying to do my best.

I wanted to do a dropdown menu in my nav bar, which I was able to. My only problem is that the button doesn't look like the rest of my nav bar. It's like in a box, and I can't figure out how to make it look like the rest.

.dropbtn {
    background-color: none;
    color:black;
    padding: 16px;
    font-size: 18px;
    text-decoration:none;
    border: none;
    height: 22px;
    font-family:Arial;
    font-size: 24px;
    outline : 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;
    background-color: white;
}

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

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

.dropdown:hover .dropbtn {
    background-color:#C0D9D;
    text-decoration:underline;
    color:#C0D9D9;
    font-size: 24px;
    font-family: Arial;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Gestion & Partage</title>
</head>

<body>


<?php

function MakeHeader()
{
    echo "<div id='logo'><img src='logo.png' style='float:left; width:200px;'/></div>";
    echo "<div id='logo_w1'><b>Tournoi Provincial Midget/Juvénile<br/>Saint-Joseph-de-Beauce</b><br/>42e édition</div>";
    echo "<div id='header_text'>";
    echo "</div>";
    
    //echo "<div id='header_right'>";       
        //echo "<img src='images/nom_image.extensions'>";
    //echo "</div><!-- fin header_right -->";   
    
    echo "<ul>";
    echo "<li><a href='index.php'>Accueil</a></li>";
    echo "<li><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></li>";
    echo "<li><a href='info.php'>Informations</a></li>";
    echo "<li><a href='hebergement.php'>Hébergement</a></li>";
    echo "<li><a href='horaire_et_resultats.php'>Horaires & Résultats</a></li>";
    echo "<li><a href='photo.php'>Photos</a></li>";
    echo "<li><a href='historique.php'>Historique</a></li>";
    echo "</ul>";
        
    echo "<div class='clear'></div><!-- protection contre les float -->";      
}

function MakeFooter()
{
    echo "<div id='footer'>";
        echo "<div style='width:350' align='center'>";
            echo "<div id='hrefjoin' style='float:left'><a href='nouscontacter.php'>Nous contacter</a></div>";
        echo "</div>";
    echo "</div>";     
}
?>
         

</body>
</html>

Solution

That's because you create it as a button and you apply the box like styling in css. Make it an anchor(a) like the rest of the menu items.

.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;
    background-color: white;
}

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Gestion & Partage</title>
</head>

<body>


<?php

function MakeHeader()
{
	echo "<div id='logo'><img src='logo.png' style='float:left; width:200px;'/></div>";
	echo "<div id='logo_w1'><b>Tournoi Provincial Midget/Juvénile<br/>Saint-Joseph-de-Beauce</b><br/>42e édition</div>";
	echo "<div id='header_text'>";
	echo "</div>";
	
    //echo "<div id='header_right'>";    	
		//echo "<img src='images/nom_image.extensions'>";
    //echo "</div><!-- fin header_right -->";	
	
	echo "<ul>";
	echo "<li><a href='index.php'>Accueil</a></li>";
	echo "<li><div class='dropdown'>
  <a href='#'>Dropdown</a>
  <div class='dropdown-content'>
    <a href='#'>Link 1</a>
    <a href='#'>Link 2</a>
    <a href='#'>Link 3</a>
  </div>
</div></li>";
    echo "<li><a href='info.php'>Informations</a></li>";
    echo "<li><a href='hebergement.php'>Hébergement</a></li>";
    echo "<li><a href='horaire_et_resultats.php'>Horaires & Résultats</a></li>";
    echo "<li><a href='photo.php'>Photos</a></li>";
	echo "<li><a href='historique.php'>Historique</a></li>";
	echo "</ul>";
		
    echo "<div class='clear'></div><!-- protection contre les float -->";      
}

function MakeFooter()
{
	echo "<div id='footer'>";
  		echo "<div style='width:350' align='center'>";
    		echo "<div id='hrefjoin' style='float:left'><a href='nouscontacter.php'>Nous contacter</a></div>";
    	echo "</div>";
    echo "</div>";     
}
?>
         

</body>
</html>