What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

More than one hoverable drop down menu

LJS

New member
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
 

Attachments

  • menu.txt
    1.7 KB · Views: 0
Back
Top