如何箭头图像添加到我的导航栏CSS3

如何在导航栏中添加一个向下的箭头符号图像，表示子菜单打开down`如何箭头图像添加到我的导航栏CSS3

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

我的列表是由像这和我想要父母显示一个向下的箭头图像指示它有下面的子列表

来源

2012-08-31 user1610736

不能留下您的问题的评论，所以我发布这个答案。

在线有很多css菜单代码。一个简单的谷歌搜索会给你很多结果。如果你不能使用CSS添加图像，你还没有给任何的示例代码显示你想要什么，所以我建议你使用类似http://cssmenumaker.com/

来源

2012-08-31 15:07:14 Onimusha

当你想要一个箭头，想象一些边框宽度的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-31 15:13:59 SexyBeast

给一个类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

来源

2012-08-31 15:18:55 ygssoni

u能帮助我的网址，因为每当我从来没有指定我的图像浏览器网址响应 – user1610736

告诉我你的网站文件夹结构，你的页面和图像在哪里。告诉我路径 – ygssoni

图像n html页面在我桌面上的同一个文件夹下面是图像的链接。C：\ Documents and Settings \ admin \ Desktop \ webpage \ approved.jpg – user1610736

如何箭头图像添加到我的导航栏CSS3

回答

相关问题