下拉菜單 - 與內容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

回答

相關問題