这个下拉列表如何显示？

Question

我刚刚发现了一个很好的脚本,你可以在这里看到它

http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/

我看到下拉有点^顶部.在CSS上我可以找到这个:

#colorNav li ul li:first-child:before{ 
    content:none;
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

只有我无法理解这是如何运作的; 它与边界有关吗？

Answer 1

这个CSS在以下标记上运行(为简单起见而减少):

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Back to the tutorial</a></li>
                <li><a href="#">Get help</a></li>
            </ul>
        </li>
        <li class="red">
            <a href="#" class="icon-cogs"></a>
            <ul>
                <li><a href="#">Payment</a></li>
                <li><a href="#">Notifications</a></li>
            </ul>
        </li>
    </ul>
</nav>

选择器以:before最内部元素上的伪元素为目标,这些li元素也是其父元素中的第一个元素:

#colorNav li ul li:first-child:before

这里缺少您的代码,但在原始教程中出现的是以下注释:

/* the pointer tip */

这组特殊的规则用于创建出现在下拉菜单顶部的小三角形,指向其相关的块(如下图所示,用红色圆圈强调):

然后按照样式创建这个三角形:

content: none;                  /* Pseudo-element has no content    */
position: absolute;             /* It's positioned absolutely       */
width: 1px;                     /* It has a width of 1 pixel        */
height: 1px;                    /* And a height of 1 pixel too      */
border: 5px solid transparent;  /* Applies initial border style     */
border-bottom-color: #313131;   /* Overrides bottom border color    */
left: 50%;                      /* Moves it half-way from the left  */
top: -10px;                     /* And 10px up above the element    */
margin-left: -5px;              /* Margin, half of width, to center */

最终结果是一个纯粹在CSS中使用边框创建的三角形.