Html 下划线导航菜单CSS
当链接悬停在上方时,我尝试使用下划线。但是,您会注意到下划线与它下面的线不齐平。有人可以解释或告诉我如何改变这个CSS工作,这样当链接悬停时,3px行位于页面上1px行的顶部。谢谢Html 下划线导航菜单CSS,html,css,Html,Css,当链接悬停在上方时,我尝试使用下划线。但是,您会注意到下划线与它下面的线不齐平。有人可以解释或告诉我如何改变这个CSS工作,这样当链接悬停时,3px行位于页面上1px行的顶部。谢谢 <!DOCTYPE html> <html> <head> <style> .menu { font-family: "Helvetica Neue", verdana, arial; position:fixed; background:t
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
font-family: "Helvetica Neue", verdana, arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item"><a href="#home">home</a></li>
<li class="ty-menu__item"><a href="#news">news</a></li>
<li class="ty-menu__item"><a href="#contact">contact</a></li>
<li class="ty-menu__item"><a href="#about">about</a></li>
</ul>
</div>
</body>
</html>
.菜单{
字体系列:“Helvetica Neue”,verdana,arial;
位置:固定;
背景:透明;
宽度:100%;
顶部:100px;
左:0;
高度:25px;/*将此视为某个阶段*/
填充:0;
文本对齐:居中;
字体大小:12px;
字体大小:600;/*将此视为某个阶段*/
填充顶部:10px;/*将此视为某个阶段*/
边框底部:1px实心#ccc;
边框顶部:1px实心#ccc;
}
.ty-菜单项{
位置:绝对位置;
列表样式类型:无;
保证金:0;
填充:0;
溢出:隐藏;
宽度:100%;
文本对齐:居中;
}
.ty-菜单项{
显示:内联块;
右边填充:50px;
左侧填充:50px;
}
a:链接,a:已访问{
显示:块;
宽度:100%;
字体重量:轻;
颜色:#494949;
背景:透明;
文本对齐:居中;
文字装饰:无;
文本转换:大写;
}
a:悬停,a:活动{
背景:透明;
底部边框:3px实心#494949;/*将此视为某个阶段*/
颜色:#494949;/*将此视为某个阶段*/
}
我在你的悬停中添加了一个填充底部,它看起来像你想要的那样位于1px顶部的3px线
a:hover, a:active {
padding-bottom:8px;
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
更新的JS小提琴:
如果我认为我理解的话,我就把它改成这个
.menu {
font-family: "Helvetica Neue", verdana, arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:35px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:1px;
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
也就是说,我更改了.menu:height请将JSFIDLE链接上载到源代码中。给你:我发誓我做到了:不过非常感谢:那不行。反正没关系。有人已经给了我答案。谢谢