设置导航菜单活动标签HTML / CSS的问题

Question

我在设置导航菜单时遇到了一些麻烦，您可以在其中选择包。

这将成为移动网站的导航菜单。

活跃的绿色li标签我需要在ul

的整个区域内均匀分布

我的问题是，当我点击标签使其激活时，绿色不会填满所有的li，蓝色仍然可见。

其次在绿色活动标签li上，我需要在活动标签的底部中心显示一个向下箭头。

我已经或多或少地包含了一个小提琴，只需要帮助设计它就可以完成它。

http://jsfiddle.net/8C3U3/

<ul id="navlist">
   <li><a href='#' class="m-active">Basic</a></li>
   <li class="spacer"><a  class="m-active"href='#'>Standard</a></li>
   <li><a  class="m-active"href='#'>Premium</a></li>
</ul>

Answer 1

予。为什么蓝色仍然显示？

蓝色仍然显示有几个原因。我会仔细阅读每一个。

1. 第一个原因是您已经提供了li填充和蓝色背景颜色。然而，您将绿色背景颜色指定给a。由于a包含li，li有填充，a无法扩展li的完整维度蓝色的。 View this JSFiddle, where that problem is corrected.

2. 第二个原因是您的li被设置为内联元素。内联元素将代码中的所有空格（空格键空格，新行等）解释为元素之间的单个空格。要摆脱这种间距，摆脱代码本身中元素之间的空白。 View that here.

未解决的问题：您会看到仍然可见蓝色。这是因为边框在元素之外呈现，并且此边框不会延伸li的整个高度（更不用说ul，它也有蓝色背景设置）。你需要弄清楚如何处理这个问题。一种选择是您可以使用:before和:after伪元素，以便关闭元素之间的间距。

II。在活动标签下方制作一个箭头

我通常制作箭头的方式是使用:after伪元素。以下是步骤：

1. 我们希望根据需要定位箭头，最好将其设置为position: absolute;。为了使它相对于父级，我们需要明确定义父级的位置。所以我们选择position: relative;，因为这不会改变父母的位置。现在我们可以在任何我们想要的地方移动箭头！
2. 让我们将伪元素设置为display: block;并给它空的内容。这使它显示为我们想要的。
3. 您可以使用边框黑客创建三角形，也可以使用unicode三角形向下字符。我选择使用in this JSFiddle.

未解决的问题：现在，您的li宽度不同。这意味着没有一行CSS代码可以使所有li的三角形居中。您需要将li s设置为相同的宽度，然后定位三角形，或者单独定位每个li并根据宽度手动放置三角形。我建议前两种可能性。

III。我该怎么做

和here's how I'd make the menu，解决了上述大部分问题。也许这将是你工作的地方。

如果您没有计划淡入箭头，那么您可能更愿意使用border hack to create the triangle，它具有更深入的浏览器支持。