Question

我想在我的博客上获取下拉菜单，但它没有结果。我相信主题中存在下拉菜单，因为我可以在CSS中看到一些证据。这是我第一次来这里，所以我会尝试非常具体

 <div id='nav1-wrapper'>
<div id='nav1'>
        <ul class='sf-menu sf-js-enabled'>


<li class='cat-item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
          <ul>
        <li>
        <a href=''><span>About Us</span></a>
        </li>
      </ul>
    <li class='cat-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
    <li class='cat-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
    <li class='cat-item'><a href='#' title='Edit this link'>Edit</a></li>

        </ul>
    </div>
</div>

在测试模式下，我试图在Home下获得“About”，但它不起作用，而是成为一个新的主菜单。

这是CSS

    #nav1-wrapper {

}
#nav1 {
    font-size: 13px;
    height: 37px;
        width:978px;
margin-left:auto;
margin-right:auto;
    background: url(http://4.bp.blogspot.com/_WoCJXgXotb8/SukuVz4pzoI/AAAAAAAABVM/IjgR927kxe8/s1600/nav1-sep.png) no-repeat left top;
}
#nav1 ul.sf-menu li {
    position: relative;
    background: url(http://4.bp.blogspot.com/_WoCJXgXotb8/SukuVz4pzoI/AAAAAAAABVM/IjgR927kxe8/s1600/nav1-sep.png) no-repeat right top;
    float: left;
    line-height: 36px;
    padding: 0 1px 0 0;
    text-align: center;
}
#nav1 ul.sf-menu li a {
    color: #666666;
    display: block;
    position: relative;
    float: left;
        font-weight:bold;
    padding:0 13px 0 13px;
    cursor: pointer;
        letter-spacing:-0.01em;
        font-size:14px;
}
#nav1 ul.sf-menu li a:hover {
    text-decoration: none;
    line-height: 36px;
    color: #333333;
}
#nav1 ul.sf-menu li a:active{
    color: #000000;
    text-decoration: none;
    line-height: 36px;
}
#nav1 ul.sf-menu li ul.children {
    border: 1px solid #000000;
    background: #272726 url(http://1.bp.blogspot.com/_WoCJXgXotb8/Suk0OoE_6LI/AAAAAAAABV8/40qI1cTpwfU/s1600/ul_children_bg.gif) repeat-y top right;
}
#nav1 ul.sf-menu li ul.children li {
    background: url(http://3.bp.blogspot.com/_WoCJXgXotb8/Suk0vKvLK4I/AAAAAAAABWE/18lJ8uP1Aes/s1600/ul_children_li_bg.gif) no-repeat bottom right;
}
#nav1 ul.sf-menu li ul.children li a {
    color: #bebebe;
    text-decoration: none;
    display:block;
}
#nav1 ul.sf-menu li ul.children li a:hover {
    text-decoration: none;
    background: none;
}
#nav1 ul.sf-menu li ul.children li ul.children {
    border: 1px solid #000000;
    border-left: none;
    background: #272726 url(http://3.bp.blogspot.com/_WoCJXgXotb8/Suk3Qj6Zi4I/AAAAAAAABWM/vwv6kTkSeG4/s1600/ul_children_ul_children_bg.gif) repeat-y top left;
}
#nav1 ul.sf-menu li ul.children li ul.children li {
    background: url(http://3.bp.blogspot.com/_WoCJXgXotb8/Suk0vKvLK4I/AAAAAAAABWE/18lJ8uP1Aes/s1600/ul_children_li_bg.gif) no-repeat bottom right;
}
#nav1 ul.sf-menu li ul.children li ul.children a {
    color: #bebebe;
    text-decoration: none;
}
#nav1 ul.sf-menu li ul.children
{
    margin:5px 0 0 0;
}
#nav1 ul.sf-menu li ul.children ul.children
{
    margin:-1px 0 0 27px;
}

我编辑了这个问题，以便提供完整的html和css代码。谢谢网址：http://thebusywire.blogspot.com/

Answer 1

您必须将类“children”附加到包含该子项的ul。在这种情况下，“关于我们”。

<ul class='sf-menu sf-js-enabled'>
    <li class='cat-item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a>
        <ul class="children">
            <li>
                <a href=''><span>About Us</span></a>
            </li>
        </ul>
    </li>
    <li class='cat-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
    <li class='cat-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
    <li class='cat-item'><a href='#' title='Edit this link'>Edit</a></li>
</ul>

sf-menu下拉菜单未显示

1 个答案: