0

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

<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>`

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

4

3 回答 3

2

给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');
}

演示

于 2012-08-31T15:18:55.960 回答
0

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

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

于 2012-08-31T15:07:14.340 回答
0

当你想要一个箭头时，想象一个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>
于 2012-08-31T15:13:59.820 回答