我正在尝试在我的导航上实现一个下拉菜单,但它也没有按照我想要的方式显示。我做错了什么?



是。。重新发帖,因为显然我的最后一个问题没有多大意义。我目前的导航是http://www.nerdcrown.net-在输入下拉菜单的代码后,我得到了这个http://www.fantasy-anime.com/nerdcrown/。下拉菜单看起来很实用,但我不知道如何让它看起来像原来的样子。(幻想动漫只是我的测试网站)

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

/*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 */

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

/*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;
}
}

您可以在这里看到一个用CSS设计下拉菜单样式的嵌套列表的好例子:http://cssdeck.com/labs/another-simple-css3-dropdown-menu我想这就是你想要的。

最新更新