【问题标题】:How to add navigation menu with header line on the top如何在顶部添加带有标题行的导航菜单
【发布时间】:2014-05-08 04:28:59
【问题描述】:

图片样本:http://i.stack.imgur.com/SxZ8D.jpg

任何人都可以帮助构建像这张带有悬停和活动的图片的 css 菜单。

尤其是导航菜单顶部的行,在活动和悬停时带有白点。

【问题讨论】:

  • 这是你的家庭作业。我们只能指导
  • 尝试在 Google 上搜索。你可以找到很多相同的例子。当然你必须玩一点颜色。
  • 我愿意,但问题是菜单顶部的那一行
  • 我的问题http://i.stack.imgur.com/SxZ8D.jpg求救!!!

标签: css menu navigation


【解决方案1】:

试试这样的(我只在 Chrome 和 Firefox 上测试过,只是为了让你知道):

nav ul li{
   display:inline-block;
   font-family:"Helvetica Neue", Arial, sans-serif;
}

nav ul li a{
   padding:8px 10px 0 0;
   text-decoration:none;
   color:#F86659;
   border-top:6px #7F170E solid;
   font-size:.9em;
   margin:0;
}

nav ul li.selected a{
   color:#FFF;
}

.circle {
   background: #7F170E;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position:relative;
   left:-2px;
   top:-2px;
   margin:0 auto;
}

nav ul li.selected .circle{
   background: #FFF;
   border:4px #7F170E solid;
}

一个示例 JSFiddle:http://jsfiddle.net/7P8qv/

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多