Question

是的..重新发布，因为显然我的上一个问题没有多大意义。我当前的导航是http://www.nerdcrown.net - 在输入下拉代码后，我得到了这个http://www.fantasy-anime.com/nerdcrown/。下拉似乎功能正常，但我不知道如何让它看起来像原始。（幻想动漫只是我的测试网站）

为了澄清，我想要的是在第一个链接中导航，看起来完全相同..只是用作下拉。我可以包含我用过的代码。我想知道我错过了什么，或者我做错了什么。这是原始编码，用于健康的菜单。

＆＃13;

/*menu*/
.menu { padding:0; margin:0; float:right; width:530px;}
.menu ul { text-align: left;  padding:15px 0 0 0; margin:0; list-style:none; border:0; float:right;}
.menu ul li { float:left; margin:0; padding:13px 5px; border:0; }
.menu ul li a { float:left; margin:0; padding:13px 0 13px 0; color:#5e5e5e; font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:13px 10px; background:none; }
.menu ul li a:hover { color:#fff; background: url(images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span {color:#fff; background:url(images/l_menu.gif) no-repeat left; }
.menu ul li a.active { color:#fff;  background:url(images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { color:#fff; background:url(images/l_menu.gif) no-repeat left; }
/* search */

＆＃13;

这是不健康的代码。它运作正常，但我似乎无法让它看起来像第一个。

＆＃13;

/*menu*/
{
width:auto !important;
margin:0;
padding: 0px;
background-image: url(../../../images/headerlinks_sprite.png);
background-repeat: no-repeat;
list-style: none;
}

#menu li {
margin: 0 7px;
display:inline; 
}

#menu li a {
display:inline-block;
    background-color: #ffffff;
    border: 1px solid #fff;
    opacity: 0.6;
    padding-left: 20px;
    background-image: url(../../../images/headerlinks_sprite.png);
    background-repeat: no-repeat;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #fff;
 }
#menu li a:hover {
    color: #c00;
    background-color: #ffffff;
    border: 1px solid #fff;
    opacity: 0.6;
}

#menu li ul{display:none;}
#menu li:hover ul{display:block;}
#menu li ul li, #nav li ul li a
{
display:inline-block;
    padding-left: 30px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}
}

＆＃13;

Answer 1

您可以在此处看到一个使用CSS设置样式的嵌套列表的优秀示例：http://cssdeck.com/labs/another-simple-css3-dropdown-menu我认为这是您正在寻找的内容。

我正在尝试在导航中实现下拉菜单，但它并没有显示我喜欢的方式。我究竟做错了什么？

1 个答案: