[英]page content below horizontal menu moving
我的水平菜單具有以下CSS:
當您將鼠標懸停在鏈接上並出現一個子菜單時,它會顯示子菜單,但下面的頁面內容會稍微向下移動。
有任何想法嗎?
在這里提琴: http : //jsfiddle.net/XwDTt/1/
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
改變這個:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
到這個:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
top:-1px;
}
這里有兩點:
border
,通常會增加元素的高度。 您可以默認使用transparent
邊框。 margin
屬性,該屬性位於absolute
位置,不會影響文檔的正常流程。 使用以下內容:
nav ul li:hover a {
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li:hover li {
margin-top: 5px; /* <-- add margin to sub-menu items */
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid transparent; /* <-- Set a transparent border */
border-bottom: 1px solid transparent; /* <-- Set a transparent border */
}
我認為這是最簡單的
nav {
margin: 0 auto;
text-align: center;
height:30px; /* add height to your nav tag */
}
您正在懸停時添加邊框。 默認情況下,您應該具有透明邊框。
nav ul li a {
display: block;
margin-bottom:5px;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
或者,您可以只設置li元素的高度:
nav ul li {
float: left;
margin: 0;
padding: 0;
height:30px;
}
解決方案1:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment these
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;*/
}
解決方案2:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment this line only */
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;;
}
並添加以下行:
nav ul li a {
margin-bottom:5px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.