How to create CSS dropdown - css

Question

I wanted to create a css dropdown for my blogger blog. But I Faced many difficulties because I am not a CSS professional and my blogger template is not designed by me. I tried many things but nothing worked for me.
I am giving you the code, please identify errors in it. Thanks...
My HTML Structure of Navigation Links:
<div id='mainmenu'>
<ul>
<li class='first current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='http://www.technodoze.com/search/label/Physics' title='Amazing Articles about Physics'>Physics</a></li>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a>
The code for drop down element where problem really is:
<ul>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a></li>
<li><a href='http://www.technodoze.com/2011/09/write-for-us.html' title='Write For Us'>Write For Us</a></li>
</ul>
From here it is normal code:
</li>
<li><a href='http://www.technodoze.com/search/label/Videos' title='Videos'>Videos</a></li>
<li><a href='http://www.technodoze.com/search/label/Downloads' title='Free Downloads'>Download</a></li>
<li><a href='http://www.technodoze.com/search/label/Biggest%20In%20The%20World' title='SG Biggest'>Biggest In The World</a></li>
<li><a href='http://www.technodoze.com/2010/01/author-of-blog.html' title='About Me'>About Me</a></li>
</ul>
</div>
See URL where this navigation linking is applied:
www.technodoze.com
Now my CSS:
#mainmenu a {
text-decoration:none;
display:block;
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover,
#mainmenu li a:focus,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
All is well till here... (The Upper CSS code is Just for the #mainmenu ul li which is infact going fine.)
The problem starts here...
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
I tried to create a drop-down but the child element [ #mainmenu ul li ul ] is not in the form of drop-down and is embedded on the side.
.
(This is currently applied on website you can view it by going to www.technodoze.com and mouseover on Amazing Stuff navigation link.)
I am sure the rare mistake is in the last piece of CSS code but I showed you the whole scenario in case this problem has arisen due to float of #mainmenu ul or any other upper element...
I will be thankful to the person helping me...
Thanks
Updated: 27 sep, 11:00 GMT, Reason: One more problem
I have changed my code now to :
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
#mainmenu ul li ul li a {
background-color:#333333;
}
#mainmenu ul li ul .first_li {
-moz-border-top-left-radius: 7px;
-khtml-border-top-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;
-moz-border-top-right-radius: 7px;
-khtml-border-top-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
#mainmenu ul li ul .last_li {
-moz-border-bottom-left-radius: 7px;
-khtml-border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
-khtml-border-bottom-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
#mainmenu ul li ul {
-moz-box-shadow: 4px 4px 2px #888;
-webkit-box-shadow: 4px 4px 2px #888;
box-shadow: 4px 4px 2px #888;
-khtml-box-shadow: 4px 4px 2px #888;
border-color: #F1F1F1;
-moz-outline-color: #F1F1F1;
}
#mainmenu a {
text-decoration:none;
display:block;
}
#mainmenu a {
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover, #mainmenu li a:hover ul li,
#mainmenu li a:focus, #mainmenu li a:focus ul li, #mainmenu li:hover > a,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu > ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:159px;
left:235px;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
Now the only problem left is that I am getting whitespace in the second order li having address [#mainmenu ul li ul li]
You can see by going to this link www.technodoze.com
Please suggest some solution.
Thanks

Answer 1

Change :
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
TO:
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
And add some new things in :
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:30px; /*new line*/
left:140px; /*new line*/
}
DEMO

Answer 2

Try this Drop down menu http://www.lwis.net/free-css-drop-down-menu/