Need an inline dropdown menu?

[RockHard]

Most of the dropdown menu's out there are nav coded menu's & use the full horizontal line their nested in but what if you need a dropdown you could add along side other inline elements or other dropdowns? Here's what I put together with a smooth opacity fade in transition, color changing menu title on hover & alternating contrast text for the links highlighted on hover like I use in several places on my main page & the sample image below.


Here's how I did it. 1st the css.

<style>

a.high {
font-family:arial;
font-weight:normal;
font-size:17px;
line-height:150%;
text-align:left;
text-decoration:none
}
       
.red1 { font-weight:bold; color:#ff0000 }

.one{ color:#a29482 }
.one:hover { color:#D2C1A8 }
a.high:visited .one { color:#009F08 }
.two { color:#558FFB }
.two:hover { color:#79AFFF }
a.high:visited .two { color:#009F08 }

.menu {
position:relative;
display:inline-block
}

.menubutton {
display:inline-block;
position:relative;
background:#000;
border-radius:1px;
background:#000;
padding-top:7px;
padding-bottom:11px;
padding-left:17px;
padding-right:18px;
box-shadow: inset 0 0 3px 4px #0044FF, 0 0 0 2px #000, 0 0 0 4px #777, 0 0 0 6px #000, 0 0 20px 12px #0044FF;
color:#1EFF00;
font-family:palatino linotype;
font-size:20px;
font-weight:bold
}

.menu-content {
background-image: url("http://storage.proboards.com/6436879/i/4qgpSNKQMwBdaFaX0THQ.jpg");background-size:875px 200px;
visibility:hidden;
position:absolute;
opacity:0;
transition:opacity .2s ease-out;
z-index:9999;
width:400px;
box-shadow: inset 0 0 3px 3px #183FFF, 0 0 0 2px #000;
border-bottom:1px solid#183FFF;
left:-2px;
padding-left:12px;
padding-bottom:12px;
border-radius:4px;
text-align:left
}

.menu:hover .menu-content { opacity:1; visibility:visible }

.menubutton:hover { color:#ffd500 }

</style>


Now the html.... Style the css & html as you prefer & add more links as needed or can add images, tables & anything else you can think of.


<div class="menu">
<p class="menubutton">Site Menu</p>
<p style="font-size:6px">.</p>

<div class="menu-content">

<p style="color:#000;line-height:130%">.</p>

<a class="high" href="https://"><span class="red1">• </span> <span class="one"><span style="font-weight:bold">HOME</span> / Main Page</span></a><br>

<a class="high" href="https://"><span class="red1">• </span> <span class="two"><span style="font-weight:bold">This place</span> - blah blah blah</span></a><br>

<a class="high" href="https://"><span class="red1">• </span> <span class="one"> more blah blah blah</span></a><br>

<a class="high" href="https://"><span class="red1">• </span> <span class="two">more blah blah blah</span></a><br>

<a class="high" href="https://"><span class="red1">• </span> <span class="one">more blah blah blah</span></a><br>
</div></div>