Question

很难学习＆＃34;漂浮＆＃34; ＆＃34;溢出＆＃34; ＆＃34;清除＆＃34;和其他一些属性所以请帮我找到好的在线网站来学习这些属性..

我打开了一些网站来制作像他们一样的设计我发现http://wix.com我很羡慕它的导航栏，所以我试着像它一样，但是我有一个问题，当鼠标在它上面时，它被推下来显示顶部边框我该如何解决这个问题谢谢，我很抱歉我的英语不好

＆＃13;

body {
	background-color: lightblue;
}


ul {
	
	position: fixed;
	list-style-type: none;
	overflow: hidden;
	top: 0px;
	right: 0px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	display: block;
	background-color:  #666666;
	transition:background-color, 1s;
}


ul:hover {
	background-color: #333;
}

il {
	transition:border-top,1s;
	float: left;
	padding-right: 10px;
	border-right: 1px solid white;
	
}

il:hover {
	border-top:5px solid lightblue; 
}

#navl {
	font-family: Trebuchet MS’, Helvetica, sans-serif;
	letter-spacing: 3px;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

pre{
	
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
	letter-spacing: 2px;
	font-size: 30px;
	text-align: center;	
	color: white;
	margin-top: 150px;
}

#plans:link, #plans:visited {
    background-color: white;
    color: black;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: block;
    border: 1px solid white;
    border-radius: 30px;
    margin: auto;
    width: 110px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size:20px;
    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}

＆＃13;

<!DOCTYPE html>

<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<ul>
<il><a id="navl" href="index.html">Home</a></il>
<il><a id="navl" href="Plans.html">Plans</a></il>
<il><a id="navl" href="About.html">About</a></il>
<il><a id="navl" href="Contact.html">Contact Us</a></il>
</ul>

<pre>test</pre>

<a id="plans" href="plans.html">Plans</a>


</body>
</html>

＆＃13;

Answer 1

首先，将il替换为li，然后将此样式添加到li：

li {
 border-top: 5px solid transparent; 
}

在ul中，而不是padding-top:8px添加padding-top:3px。

Answer 2

发生这种情况的原因是因为边框会增加元素的高度。要更正它，您可以从主元素中移除高度或将其向上移动：

li:hover {
  margin-top: -5px; //shifts the element up 5px
}

或者你可以有一个不可见的边框Teuta mentions被新边框“掩盖”。

Answer 3

这是我做的一些小工作的链接。我删除了ul中的填充顶部。将il改为li。因为实际上它是＆＃39; li＆＃39;不是＆＃39;我在li中添加了一个边框顶部。

这是我改变的css代码。

ul:hover {
    background-color: #666666;
}

li {
    transition:border-top,1s;
    float: left;
    padding-right: 10px;
    border-right: 1px solid white;
    border-top:5px solid #666666;
}

li:hover {
    border-top:5px solid lightblue; 
}

https://jsfiddle.net/7x7dy3jt/

当边框出现时，<il>被按下

3 个答案: