[英]page content below horizontal menu moving
I have this css for my horizontal menu: 我的水平菜单具有以下CSS:
when you hover over the links and a sub menu appears, it shows the sub menu but the page content below moves down slightly. 当您将鼠标悬停在链接上并出现一个子菜单时,它会显示子菜单,但下面的页面内容会稍微向下移动。
any ideas? 有任何想法吗?
fiddle here: http://jsfiddle.net/XwDTt/1/ 在这里提琴: 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;
}
change this: 改变这个:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
into this : 到这个:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
top:-1px;
}
There are two points here: 这里有两点:
border
to an element, it often increases the height of the element. border
,通常会增加元素的高度。 You could use a transparent
border by default. transparent
边框。 margin
property on anchor tags, you could use the property on the sub-menu list-items, which are positioned absolute
and doesn't affect the document normal flow. margin
属性,该属性位于absolute
位置,不会影响文档的正常流程。 Use the following: 使用以下内容:
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 */
}
i think this one is the simplest 我认为这是最简单的
nav {
margin: 0 auto;
text-align: center;
height:30px; /* add height to your nav tag */
}
You are adding border on hover. 您正在悬停时添加边框。 You should have transparent borders by default... And margin too.
默认情况下,您应该具有透明边框。
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;
}
Or you can just set the height of li elements: 或者,您可以只设置li元素的高度:
nav ul li {
float: left;
margin: 0;
padding: 0;
height:30px;
}
Solution 1: 解决方案1:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment these
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;*/
}
Solution 2: 解决方案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;;
}
and add this line: 并添加以下行:
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.