0

一开始我想说我是波兰人，我的英语不是最好的。我正在制作自己的网站，但我的菜单有问题。它非常具体，因为它使用自动高度和 jquery 幻灯片来制作一些漂亮的动画。

我的问题是“第二”级菜单。我需要在页面左侧显示项目的描述下划线。

HTML 没问题

<nav>
    <ul>
        <li>1. Item
            <h3>1. item description</h3>
        </li>

        <li>2. Item
            <h3>2. item description</h3>
        </li>

        <li>3. Item
            <h3>3. item description</h3>
        </li>
    </ul>
</nav>

我认为问题出在 CSS 和一些 DOM 设置中。它必须在这里：

nav {
    background-color:#eee;
    width:100%;
    height:auto;
    position:fixed;
    top:0px;
}
nav ul {
    /*don't enter hegiht*/
}
nav ul li {
    list-style:none;
}
nav ul li {
    display:table-cell;
    padding:20px 10px 21px 10px;
}
nav ul li h3 {
    display:block;
}

和 jQuery ：

$(document).ready(function() {

    $("nav h3").hide();
    //hide description

    //show when hover
    $("nav li").hover(function(){
        $("h3", this).slideToggle("slow");

    },function(){
        $("h3", this).slideToggle("slow");
    },800);
    return false;


});
4

2 回答 2

1

我不确定你的意思是什么：“我需要在页面左侧显示项目的描述下划线。”

这会将描述放置在页面的左侧：

 nav ul li h3 {
        position:absolute;
        left:0px;            
        display:block;
    }​
于 2012-12-23T19:05:59.873 回答
0

如果您的 DOM 元素是嵌套的，那么它们最自然的布局也是以这种方式显示它们。你可以通过使用绝对定位来解决这个问题，但我经常这样忘记事情。

我会将您拥有的列表分成两个单独的列表：

<nav>
    <ul class='top'>
        <li>1. Item</li>
        <li>2. Item</li>
        <li>3. Item</li>
    </ul>
    <ul class='bottom'>
        <li>1. item description</li>
        <li>2. item description</li>
        <li>3. item description</li>
    </ul>
</nav>

li有了这些，当用户将鼠标悬停在顶部时，动画就变成了寻找相应底部的问题li：

$(document).ready(function() {

    $("nav ul.bottom li").hide();
    //hide description

    //show when hover
    $("nav ul.top li").hover(function(){
        $("nav ul.bottom li:eq("+$(this).index()+")").slideToggle("slow");

    },function(){
        $("nav ul.bottom li:eq("+$(this).index()+")").slideToggle("slow");
    },800);
    return false;

});

我使用了这个额外的 CSS：

nav ul.bottom li {
    position:absolute;
    left:0px;            
    display:block;
}

更新的小提琴可以在这里找到：http: //jsfiddle.net/GRf98/2/

于 2012-12-23T20:53:23.950 回答