Struggling with my final project for a class as the semester comes to a close. I've received minimal help from my Professor and hit a roadblock. The main navigation on the side is working correctly, but the dropdown options are stacking on top of each other despite being rotated correctly. I've tried various solutions but can't seem to get them spaced properly. Any suggestions or assistance would be greatly appreciated. Thank you.
#rotate-text {
text-align: center;
width: 25px;
transform: rotate(270deg);
}
.navbar{
overflow: hidden;
background-color: aliceblue;
font-family: cursive;
}
/* Style the links inside the navigation bar */
.topnav a {
transform-origin: top left;
transform: rotate(-90deg) translateX(-100%);
font-family: 'Bevan', cursive;
float:left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: bolder;
font-size: 20px;
}
.dropdown{
float: center;
overflow: hidden;
}
.dropdown .dropbtn {
transform-origin: top left;
transform: rotate(-90deg) translateX(-100%);
font-family: 'Bevan', cursive;
float:left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: bolder;
font-size: 20px;
border: solid;
outline: none;
background-color: inherit;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
left: 70px;
}
.dropdown-content a {
float: none;
color: #f2f2f2;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the color of links on hover */
.topnav a:hover {
color:aqua
}
.topnav a.active
{
border-color: cadetblue;
}
/*-90 rotate
.topnav a: rotate {
transform: rotate(-90deg);
}<html>
<head>
<link href='finale.css' rel='stylesheet'/>
<style>
body{
background-image: url(BGGradient.png);
background-repeat:no-repeat;
}
#title{
text-align: center;
font-family: cursive;
font-size: 36pt;
font-weight: bolder;
color: #f2f2f2;
}
#base{
border: solid;
}
</style>
</head>
<body>
<div id="title">
Zurion Oasis
</div>
<div>
<table height=100% width=100%>
<tr>
<td>
<table height=100%>
<tr>
<td class="topnav" style="height:100px">
<a href="#contact">CONTACT</a>
</td>
</tr>
<tr>
<td class="topnav" style="height:100px">
<a href="#about">ABOUT</a>
</td>
</tr>
<tr>
<td class="topnav" style="height:100px">
<div class="dropdown" id="work">
<button class="dropbtn">WORK
</button>
<div class="dropdown-content">
<a href="#">Photography</a>
<a href="#">Digital</a>
<a href="#">Physical Medium</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="topnav" style="height:100px">
<a class="active" href="#home">HOME</a>
</td>
</tr>
</table>
</td>
<td>
<div id="base">
REST OF PAGE GOES HERE
</div>
</td>
<tr>
</table>
</div>
</body>
</html>