CSS/HTML：动态`上的菜单项

我试图创建一个基本的菜单，悬停用“帽子”边境hat`边界出现在菜单的顶部上:hoverCSS/HTML：动态`上的菜单项

的边界不是一条直线，但有一个（轮）碰撞在中心（基本上像帽子一样）出现像这样：__/\__，当它出现在一个更大的菜单名称，它看起来像这样：_____/\_____

我希望此边框出现在每个菜单元素的上方，但会相应地调整其水平线的大小。这样做可能不需要使用大量图像[即每种类型的菜单大小的图像，或者必须将所有菜单项目替换为图像]或（很多）CSS3？

典型菜单代码如下：

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>

来源

2013-10-15 Serge P

如果我在哪里，我会将相同的图像添加到带有“background-size：cover;”的每个项目上。 css属性。它将以你的形象为中心。然后，只需隐藏溢出当前悬停选项卡的所有内容 – Romain

使用:after伪连同CSS三角形设置为position: absolute;

Demo（将鼠标悬停在菜单中看到所期望的效果）

说明：我在这里使用:after伪，这将创建一个虚拟元素，并将其设置为position: absolute;，并且正在使用bottom和left属性来定位将在:hover上可见的三角形。请确保您使用content: "";这很重要，同样，如果您正在寻找创建排水沟，则不会在该元素上创建排水沟，这比您可能需要的clip属性要高。

#nav { 
    height: 30px; 
    background: #999; 
} 

#nav li { 
    display: inline-block; 
    margin-left: 20px; 
    line-height: 30px; 
    color: #fff; 
    position: relative; 
} 

#nav li a { 
    color: inherit; 
    text-decoration: none; 
} 

#nav li:hover:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-bottom: 4px solid #fff; 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    position: absolute; 
    left: 50%; 
    margin-left: -2px; 
    bottom: 0; 
}

来源

2013-10-15 10:06:08

CSS/HTML：动态`上的菜单项

回答

相关问题