Question

这里对jquery很新，所以对我很轻松; - ）

我正在尝试一个简单的下拉菜单。

似乎工作正常，但有一个小问题。

当我将鼠标悬停在level_1菜单元素上时，幻灯片向下启动但css中定义的边框半径设置似乎只有在 level_2元素滑落后才会启动。

结果是，当level_2 div向下滑动时，边缘是方形的。完成向下滑动时，边缘会变圆。

我觉得这可能与填充有关。我已经尝试将level_2上的填充设置为0 - 左边的问题仍然存在。此外，它可以在整个地方敲响造型，尽管那里可能还有工作。

我在下面提供了完整的代码。有谁知道这里发生了什么？这是非常简单的事情还是从一开始就需要重做？ ; - ）

提前致谢燕姿

* CSS *

<style> .level_1 { border-radius:15px; border: 1px solid black; margin: 0 1px 0 1px; padding: 5px 10px; width: 150px; height: 20px; font-family: Century Gothic; font-size: 12px; font-weight: 900; color: #ffffff; text-align: center; vertical-align: text-bottom; display: block; list-style: none; float: left; z-index: 10; background-color: #d800ff; } .level_2 { display: block; position: relative; top: 10px; left: -11px; border: 1px solid black; border-radius:15px; margin: 1px 0 1px 0; padding: 0; width: 150px; background-color: #b003cf; font-family: Century Gothic; font-size: 12px; font-weight: 900; color: #ffffff; text-align: center; vertical-align: text-bottom; list-style: none; } a { text-decoration: none; } </style> *** The HTML *** <nav class="container"> <div class="level_1">Item 1 <div> <a class="level_2" href="#">Level 2 - Item 1</a> <a class="level_2" href="#">Level 2 - Item 2</a> <a class="level_2" href="#">Level 2 - Item 3</a> </div> </div> <div class="level_1">Item 2 <div> <a class="level_2" href="#">Level 2 - Item 1</a> </div> </div> <div class="level_1">Item 3 <div> <a class="level_2" href="#">Level 2 - Item 1</a> <a class="level_2" href="#">Level 2 - Item 2</a> </div> </div> <div class="level_1">Item 4 <div> <a class="level_2" href="#">Level 2 - Item 1</a> <a class="level_2" href="#">Level 2 - Item 2</a> <a class="level_2" href="#">Level 2 - Item 3</a> <a class="level_2" href="#">Level 2 - Item 4</a> </div> </nav> ***The Jquery*** $('.level_1').hover( function(){ $(this).children().stop().slideDown("slow"); }, function(){ jQuery.dequeue( this ); $(this).children().stop().slideUp("slow"); } ); $('a').hover( function(){ $(this).css("background-color","#9302ad"); }, function(){ $(this).css("background-color","#b003cf"); } ); $('.level_1').children().hide();

Answer 1

我认为这个问题实际上取决于你的填充以及子菜单的相对位置。删除left: -11px;并将box-sizing: border-box;添加到a代码会稍微修复一下（至少在Chrome中）

DEMO

我可以提出建议吗？我个人觉得这种结构化这类菜单的方法更具可读性（也更可预测）......

HTML：

<nav class="container">
    <ul>
        <li><a href="/">Item 1</a>
            <ul>
                <li><a class="level_2" href="#">Level 2 - Item 1</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 2</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 3</a></li>
            </ul>
        </li>
        <li><a href="/">Item 2</a>
            <ul>
                <li><a class="level_2" href="#">Level 2 - Item 1</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 2</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS：

.container {
    margin-top: 40px;
}

.container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container > ul > li {
    display: inline-block;
    position: relative;

.container ul li a {
    display: block;
}

.container ul ul {
    position: absolute;
    left: 0;
    top: 30px;
    display: none;
}

这也简化了你的JQuery：

$('.container ul > li').mouseenter(function() {
   $('ul',this).stop().slideDown("slow");
}).mouseleave(function() {
    $('ul',this).stop().slideUp("slow");
});

DEMO

css边框半径仅在* jquery slideDown后显示*

1 个答案: