I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown
to appear when you hover over .droptoggle
. I'm including the entire page because I can't figure out what's wrong, and being new to HTML and CSS, it's probably something small and simple that I'm overlooking. Thank you in advance for any assistance!
HTML:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #36363c;
}
.tbback {
height: 65px;
width: 100%;
background: #2d2d33;
}
.navtext li {
display: inline;
padding: 25px;
}
// More CSS code...
.droptoggle:hover + .dropdown {
display: block;
}
<?
// PHP code omitted for brevity
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
// More HTML code...
</head>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
// Tawk.to script...
</script>
<!--End of Tawk.to Script-->
<body>
<!---NAVBAR--->
<? if(isset($_SESSION['steamid'])) {?>
<div class="tbback">
<div class="proppos">
<ul class="userprop">
// More HTML code...
</ul>
</div>
// More HTML code...
</div>
<div class="dropdown">
<ul>
// More HTML code...
</ul>
</div>
<!---DEPO--->
<!---CHAT--->
<div class="chatback">
<div class="chatscroll">
<div class="chatobject">
</div>
</div>
</div>
<? } else {?>
<? } ?>
</body>
</html>