Question

我想为我的博客博客创建一个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>

请参阅应用此导航链接的网址： 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或任何其他上层元素的浮动而出现这个问题......

我会感谢帮助我的人......

由于

更新时间：27 sep，格林威治标准时间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;
}

现在唯一的问题就是我在第二顺序中获得空格[#mainmenu ul li li li]

您可以转到此链接www.technodoze.com

查看

请提出一些解决方案。

由于

Answer 1

更改：

#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;
    }

并添加一些新内容：

#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
    top:30px;   /*new line*/
    left:140px; /*new line*/
}

DEMO

Answer 2

试试此下拉菜单http://www.lwis.net/free-css-drop-down-menu/

如何创建CSS下拉列表

2 个答案: