More than one hoverable drop down menu

[LJS]

Hello there

I am using this code for a hoverable dropdown list on my page...

<style>

.dropbtn {

OPACITY: 1;
color: RGB(0, 120, 150);
background-color: RGB(0, 120, 150);
padding: 1px 80px;
font-size: 25px;
font: Helvetica RoundedArial,sans-serif;
border: none;
position:fixed;top:11.0%;left:53%;
}

.dropdown {
position:fixed;top:15%;left:53%;
display: inline-block;
font: Helvetica RoundedArial,sans-serif;
}

.dropdown-content {
display: none;
position: left;
background-color: RGB(0, 120, 150);
z-index: 1;

font: Arial Rounded MT Bold;
}

.dropdown-content a {
color: white;
padding: 0px 30px;
font-size: 16px;
font: Helvetica RoundedArial,sans-serif;
text-decoration: none;
display: block;

}

.dropdown-content a:hover {background-color: RGB(0, 140, 150);}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: RGB(0, 120, 150);;}


</style>
</head>

<div class="dropdown">
<button class="dropbtn">Title</button>
<div class="dropdown-content">
<a style="font-family:Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif; "href="" class="btn btn-default"></a>
<a style="font-family:Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif; "href="" class="btn btn-default"></a>
<a style="font-family:Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif; "href="" class="btn btn-default"></a>

</div>
</div>
</body>
</html>

I was wondering how I would be able to integrate more than one drop down on the same page, when i try to put another one, all it does is move where the button for the above drop down is on the page. I don't seem to be able to have more than one menu.

Many thanks in advance

 

[LJS]

Can anyone help?