Question

如何在导航栏中添加向下箭头符号图像以指示子菜单向下打开

<ul class="navigation">
    <li> 
    <a href="#"> parent </a> 
            <ul>  
            <li> <a href="#"> child 1 </a></li>
            <li> <a href="#"> chil2 </a></li>
            <li> <a href="#"> child3 </a></li>
            <li> <a href="#"> child4</a></li>
            <li> <a href="#"> child5</a></li>
            <li> <a href="#"> child6 </a></li>
            <li> <a href="#"> child7 </a></li>
            </ul>
     </li>`

我的列表是这样的，我希望父母用向下箭头图像显示它下面有子列表

Answer 1

为具有子菜单的li提供课程。像这样：

HTML：

   <ul class="navigation">
        <li class="sub-menu"> 
        <a href="#"> parent </a> 
                <ul>  
                <li> <a href="#"> child 1 </a></li>
                <li> <a href="#"> chil2 </a></li>
                <li> <a href="#"> child3 </a></li>
                <li> <a href="#"> child4</a></li>
                <li> <a href="#"> child5</a></li>
                <li> <a href="#"> child6 </a></li>
                <li> <a href="#"> child7 </a></li>
                </ul>
         </li>

<强> CSS：

.sub-menu
{
list-style-image:url('sqpurple.gif');
}

DEMO

Answer 2

无法对您的问题发表评论，因此我将此作为答案发布。

网上有很多css菜单代码。一个简单的谷歌搜索将给你很多结果。如果您无法使用css添加图像，并且您没有提供任何示例代码来显示您想要的内容，那么我建议您使用类似http://cssmenumaker.com/

的内容

Answer 3

如果你想要一个箭头，想象一下div有一些边框宽度。现在，如果将高度和宽度减小到0，则仅保留边框。如果它们具有不同的颜色，请考虑边界的交叉，因为没有宽度或高度，它们将缩小为三角形。如下所示：

<!DOCTYPE html>
<html>  
<head>
<style>
div { width: 0px; height: 0px; border-left: 5px solid black; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; }
</style>
</head>
<body>
<div></div>
</body>
</html>

如何将箭头图像添加到css3中的导航栏

3 个答案: