0

对 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();
4

1 回答 1

0

我认为问题实际上在于您的填充以及子菜单的相对定位。删除left: -11px;和添加box-sizing: border-box;到您的a标签可以在一定程度上修复它（至少在 Chrome 中）

演示

我可以提个建议吗？我个人发现这种构建这些类型菜单的方法更具可读性（并且更可预测）......

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");
});

演示

于 2013-11-12T15:48:28.753 回答