左上角缺部分的菜单

最新推荐文章于 2020-08-15 11:08:52 发布

weixin_34272308

最新推荐文章于 2020-08-15 11:08:52 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenxuan1993/archive/2011/10/28/2227518.html

本文介绍了一种使用CSS实现的导航菜单样式设计方案，通过具体的HTML和CSS代码示例，展示了如何为网站创建一个美观且实用的导航栏。该方案重点在于利用CSS属性实现导航项的悬浮效果及三角指示符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<title>无标题文档</title>
<style>
.item{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
background:#ccc;
list-style-type:none;
float:left;
padding-bottom:5px;
}
.item li{
float:left;
padding:5px;
margin:5px;

}
.item li a,.item li a:visited{
color:#fff;
text-decoration:none;
font-weight:bold;
position:relative;
background-color:red;
padding:5px;
}
.item li a span{
width:0px;
height:0px;
border-width:8px 8px 0 0;
border-color:#ccc #f00;
border-style:solid;
overflow:hidden;
display:block;
position:absolute;
top:0px;
left:0px;
}
.item li a:hover span{
border-color:#ccc #c90;}
.item li a:hover{
color:#000;
background:#c90;}
</style>
</head>

<body>
<ul class="item">
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Web Dev</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Map</a></li>
</ul>
</body>

转载于:https://www.cnblogs.com/shenxuan1993/archive/2011/10/28/2227518.html