我想为我的博主博客创建一个 CSS 下拉菜单。但是我遇到了很多困难，因为我不是 CSS 专业人士，而且我的博客模板不是我设计的。我尝试了很多东西，但对我没有任何效果。我给你代码，请找出其中的错误。谢谢...
我的导航链接的 HTML 结构：
<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>
问题所在的下拉元素的代码：
<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>
从这里开始是正常的代码：
</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>
请参阅应用此导航链接的 URL： www.technodoze.com
现在我的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;
}
到这里为止一切都很好......（上面的 CSS 代码仅用于#mainmenu ul li，实际上它运行良好。）
问题从这里开始...
#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;
}
我尝试创建一个下拉菜单，但子元素 [#mainmenu ul li ul] 不是下拉形式，而是嵌入在侧面。. （这目前在网站上应用，您可以通过访问 www.technodoze.com 并将鼠标悬停在 Amazing Stuff 导航链接上查看它。）
我确信罕见的错误出现在最后一段 CSS 代码中，但我向您展示了整个场景，以防由于 #mainmenu ul 或任何其他上层元素的浮动而出现此问题......
我会感谢帮助我的人...
谢谢
更新时间：9 月 27 日，格林威治标准时间 11:00，原因：还有一个问题
我现在已将代码更改为：
#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;
}
现在剩下的唯一问题是我在二阶 li 中得到空格，地址为 [#mainmenu ul li ul li]
您可以通过此链接查看www.technodoze.com
请提出一些解决方案。
谢谢