Hello everyone!
I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents “my” current code, with placeholder colors, text, links etc.:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style type="text/css">
/* background */
body {
background-color: #252525;}
/* targeted dropdown button style */
.dd-select {font: 10.5px Verdana; text-transform: uppercase;}
.dd-select a:link {color: #ff0000; text-decoration: none;}
.dd-select a:hover {color: #ffea00;}
/* positioning */
ul.Menu ul{display:none}
ul.Menu li:hover>ul{display:block}
ul.Menu ul{position: absolute; left:-1px; top:98%;}
ul.Menu li:hover{position:relative;}
/* shrink to fit */
ul.Menu {
float: left;}
/* dropdown button */
ul.Menu {
margin:0px;
list-style:none;
padding:0px;}
/* menu case */
ul.Menu ul {
margin:0px;
list-style:none;
padding:0px;
background-color:#5c5c5c;
border-color:#a3a3a3;
border-width:1px;
border-style:solid;}
/* menu element padding */
ul.Menu li{
margin:5px 5px 5px 5px;}
/* menu element */
ul.Menu a {
display:block;
background-color:#454545;
text-align:left;
padding:4px 9px 5px 9px;
font:normal 11.5px Verdana;
color: #f7f7f7;
text-decoration:none;}
/* menu hover */
ul.Menu li:hover>a{
background-color:#333333;
color: #00ff60;}
</style>
</head>
<body>
<ul class="Menu">
<li><a href="#" target="_top">Select</a>
<ul>
<li><a href="#" target="_top">Option 1</a></li>
<li><a href="#" target="_top">Option 2</a></li>
<li><a href="#" target="_top">Option 3</a></li>
</ul>
</li>
</ul>
<p> </p>
<p> </p>
<p class="dd-select"><a href="#">Select (as it should look)</a></p>
</body>
</html>
Now my problem is, I would like the dropdown menu’s trigger button (labeled “Select”) to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look.
Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help!
Kind regards,
Jakob