CSS Dropdown Menu Generator

menu class:  menu width:  background color:
menu title:  menu title color:  title size:
menu border size:  color: 
a:link:  font size:  padding top / bottom:  padding right / left:
a:hover background color:  a:hover text color:
1.
2.
3.
4.
5.
6.
7.
8.
9.
That's all folks!
copy to clipboard
<style>
/* add to the head of your document */
.{{menutitle}} {
 position: relative;
 display: inline-block;
}
.{{menutitle}}-content {
 background-color: {{bgcolor}};
 min-width: {{dcwidth}}px;
 display: none;
 position: absolute;
 left: 0;
 z-index: 1;
 border: {{bordsze}}px {{bordclr}} {{bordstyl}};
}
.{{menutitle}}:hover .{{menutitle}}-content {
 display: block;
}
.link-title {
 color: {{linkclr}};
 font-size: {{linktitlefz}}px;
}
.{{menutitle}}-content a {
 display: block;
 color: {{ltxt}};
 padding: {{lpadt}}px {{lpadr}}px;
  font-size: {{linkafz}}px;
  text-decoration: none;
}
.{{menutitle}}-content a:hover {
 background-color: {{hovclr}};
 color: {{hovtxtclr}};
}
</style>

<!--- add to the body of your document --->
<div class="{{menutitle}}">
 <div class="link-title">{{linktitle}}</div>
 <div class="{{menutitle}}-content">
  <a href="{{link1}}" title="{{link1titl}}">{{link1titl}}</a>
  <a href="{{link2}}" title="{{link2titl}}">{{link2titl}}</a>
  <a href="{{link3}}" title="{{link3titl}}">{{link3titl}}</a>
  <a href="{{link4}}" title="{{link4titl}}">{{link4titl}}</a>
  <a href="{{link5}}" title="{{link5titl}}">{{link5titl}}</a>
  <a href="{{link6}}" title="{{link6titl}}">{{link6titl}}</a>
  <a href="{{link7}}" title="{{link7titl}}">{{link7titl}}</a>
  <a href="{{link8}}" title="{{link8titl}}">{{link8titl}}</a>
  <a href="{{link9}}" title="{{link9titl}}">{{link9titl}}</a>
 </div>
</div>
Riverdrift.comroadrun
1999 - 2024    Made in the U.S.A