CSS箭头从菜单到子菜单

Question

我对CSS很新，并且主要通过复制和粘贴以及慢慢进行自定义来学习。我想知道如何从菜单到子菜单类别创建箭头。

我已经尝试了其他一些问题和论坛，但他们现在确实帮助我得到了我想要的结果。希望有人能够帮助新手!!

PS。 对于那些认为我的问题是垃圾邮件的人，对不起，我删除了链接，只会看到评论中出现的内容！ ：）

Answer 1

http://css-tricks.com/snippets/css/css-triangle/

的 HTML

  

你可以用一个div制作它们。为每个方向提供课程是很好的。

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

的 CSS

  

这个想法是一个零宽度和高度的盒子。箭头的实际宽度和高度由边框的宽度决定。例如，在向上箭头中，底部边框是彩色的，而左边和右边是透明的，形成三角形。

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
}

<强> See working jsFiddle demo

Answer 2

您可以使用CSS Triangles（简单示例）为这样的元素创建它们：

<div id=item>Text</div>

以下样式将在顶部添加箭头：

#item { background: #ccc; padding: 10px; position: relative; top: 10px; }
#item:before { content: ''; height: 0; position: absolute; top: -10px; width: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ccc; }

JSFiddle example.

它使用:before伪元素，动态创建一个新元素，并通过边框技巧使其成为箭头。

一个更复杂的例子，创建一个完整的菜单：

HTML

<ul>
    <li>
        <a>Menu</a>
        <ul>
            <li><a>sub</a>
            <li><a>menu</a>
        </ul>
    <li>
        <a>Menu</a>
        <ul>
            <li><a>sub</a>
            <li><a>menu</a>
        </ul>
</ul>

CSS

a { background: #aaa; display: block; padding: 10px; width: 100px; }
li { display: inline-block; position: relative; }
li ul { display: none; }
li ul:before { content: ''; height: 0; left: 10px; position: absolute; top: -10px; width: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ccc; }
li ul a { background: #ccc; }
li:hover ul { display: block; position: absolute; top: 40px; }
ul { margin: 0; padding: 0; }

JSFiddle example.