下拉菜单 - 与内容colide

我做了一个菜单使用HTML,CSS和jQuery，但它似乎工作不正常。我认为问题是适用于所有列表项目的float:left;样式。如何包装浮动在一个div左侧的项目，并防止它与内容碰撞？下拉菜单 - 与内容colide

我试着将display:block;应用到项目，但这个混乱了下拉菜单。

$('document').ready(function() { 
 
    $('li').hover(function() { 
 
    $(this).find('ul>li').slideToggle(200); 
 
    }); 
 
});

ul { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
    z-index: 1000; 
 
} 
 

 
ul li { 
 
    float: left; 
 
    width: 100px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    background-color: #ff0000; 
 
} 
 

 
ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
ul li li { 
 
    background-color: #999999; 
 
    display: none; 
 
    z-index: 1000; 
 
} 
 

 
ul li li:hover { 
 
    background-color: #555555; 
 
} 
 

 
a { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 

 
.test { 
 
    z-index: 1; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li><a href="#">home</a> 
 
     <ul> 
 
     <li><a href="#">podlink1</a> 
 
     </li> 
 
     <li><a href="#">podlink2</a> 
 
     </li> 
 
     <li><a href="#">podlink3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">kontakty</a> 
 
     <ul> 
 
     <li><a href="#">podlink1</a> 
 
     </li> 
 
     <li><a href="#">podlink2</a> 
 
     </li> 
 
     <li><a href="#">podlink3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">linki</a> 
 
    </li> 
 
    <li><a href="#">about</a> 
 
    </li> 
 
    </ul> 
 
    <div class="test"> 
 
    finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-03-07 Marcin Pastuszak

当你使用浮动浮动元素的容器变为0高度，使你你要清楚你的菜单后，浮动

ul:after { 
    clear: both; 
    content: ""; 
    display: table; 
}

所以，你的代码变得

$('document').ready(function() { 
 
    $('li').hover(function() { 
 
    $(this).find('ul>li').slideToggle(200); 
 
    }); 
 
});

ul { 
 

 
    margin: 0px; 
 

 
    padding: 0px; 
 

 
    list-style: none; 
 

 
    z-index: 1000; 
 

 
} 
 
ul:after { 
 
    clear: both; 
 
    content: ""; 
 
    display: table; 
 
} 
 
ul li { 
 

 
    float: left; 
 

 
    width: 100px; 
 

 
    height: 30px; 
 

 
    line-height: 30px; 
 

 
    text-align: center; 
 

 
    background-color: #ff0000; 
 

 
} 
 

 
ul li a { 
 

 
    text-decoration: none; 
 

 
    color: white; 
 

 
} 
 

 
ul li li { 
 

 
    background-color: #999999; 
 

 
    display: none; 
 

 
    z-index: 1000; 
 

 
} 
 

 
ul li li:hover { 
 

 
    background-color: #555555; 
 

 
} 
 

 
a { 
 

 
    width: 100%; 
 

 
    height: 100%; 
 

 
    display: block; 
 

 
} 
 

 
.test { 
 

 
    z-index: 1; 
 

 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li><a href="#">home</a> 
 
     <ul> 
 
     <li><a href="#">podlink1</a> 
 
     </li> 
 
     <li><a href="#">podlink2</a> 
 
     </li> 
 
     <li><a href="#">podlink3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">kontakty</a> 
 
     <ul> 
 
     <li><a href="#">podlink1</a> 
 
     </li> 
 
     <li><a href="#">podlink2</a> 
 
     </li> 
 
     <li><a href="#">podlink3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">linki</a> 
 
    </li> 
 
    <li><a href="#">about</a> 
 
    </li> 
 
    </ul> 
 
    <div class="test"> 
 
    finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-03-07 11:15:25

感谢U.它帮助我找到解决它的热点。清理浮动修复主manu的问题。添加到 ul li li {position：relative}将下拉菜单放在顶部。的内容 –

@MarcinP。是的，我没有给你这个注意，因为你没有问这个问题:)，你还有其他问题吗？ –

下拉菜单 - 与内容colide

回答

相关问题