Multiply.Design - Dropdown Menu - CSS/HTML combo

http://multiplydesign.multiply.com/journal/item/258
Create dropdown menu thru CSS-HTML combo. Now, this one's actually a bit complicated. There are still a lot of ways to do dropdowns (cssplay has incredible ones). I just wanna share what I have up and how I did it. The original codes were provided by thecakeisalie..

This would be great for those who are fond of using tags. That means, I can create submenus that will link to the blogs that have the same tag (eg, shoutouts). It's gonna seem like you have more pages than you actually do.

The CSS (paste them in your custom CSS)

.dd1 {
font-family: tahoma;
width:105px;
height:100px;
position:absolute;
left: 10%;
font-size:11px;
z-index:100;
}
.dd1 ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:104px;
height:20px;
text-align:center;
color:#fff;
background: transparent URL(image.url) scroll center center no-repeat;
line-height: 20px;
font-size:11px;
overflow:hidden;
}
.dd1 ul {
padding:0;
margin:0;
list-style-type: none;
}
.dd1 ul li {
float:left;
position:relative;
}
.dd1 ul li ul {
display: none;
}
.dd1 ul li:hover a {
color:#000;
background: transparent URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul {
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
}
.dd1 ul li:hover ul li ul {
display: none;
}
.dd1 ul li:hover ul li a {
display:block;
color: #fff;
background: URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul li a:hover {
background: URL(image.URL) transparent scroll no-repeat center center;
color:#000;
}
.dd1 ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.dd1 ul li:hover ul li:hover ul.left {
left:-105px;
}


The HTML (paste them in your site title)

• MENU TITLE
  
  
  
  • submenu link 1 title
  
  
  • submenu link 2 title
  
  
  • submenu link 3 title
  
  
  • submenu link 4 title
  
  
  

CSS notes:
1. Now if you think that was already exhaustively long, well, that would only create ONE menu. You'll have to repeat the whole process changing .dd1 to .dd2, .dd3, and so forth for more menus..

2. Of course you'll have to change the left position value (highlighted) for the for the next menus, otherwise they'll assume the same position making the other menus not visible.

HTML notes:
1. Change the class (eg, dd1) to dd2, dd3 and so forth for subsequent menus.

2. You can add more submenu items by repeating the whole highlighted portion below each other.

3. Before pasting the codes to your site title, make sure there are no line breaks. That's because the site title has no room for them. (I had put line breaks on this tutorial for better viewing purposes.)


More notes:
1. You're gonna have to hide the default nav bar. Do that by adding the following string to your custom CSS.
div#subnav {display: none;}

2. Some vales you can customize include background color, image; font color, size, family, weight, etc; width and height of each menu and submenu.



Examples:
1. Using one menu. (The actual codes I posted here)

2. More than one menu. (Using the actual codes in my page).


Now, it may seem like a lot of work, but remember, patience is a virtue. lol

attachments!