CODEWITHSUNDEEP
htmlcsshtml-lists
user1610736
user1610736

Reputation: 1

how to add an arrow image to my navigation bar in css3

how to add an down arrow sign image in the navigation bar to indicate sub menu opening down`

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

my list is made like this and i want parent to show with an down arrow image indication it has child list below

Upvotes: 0

Views: 2532

Answers (3)

ygssoni
ygssoni

Reputation: 7349

Give a class to the li which have a sub menu. Like this :

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

Upvotes: 2

NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5153

When you want an arrow, imagine a div with some border width. Now if you reduce the height and width to 0, only the borders remain. If they are of different colors, think of the intersection of the borders, because there is no width or height, they will be reduced to triangles. So something like:

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

Upvotes: 0

Onimusha
Onimusha

Reputation: 3385

Can't leave a comment on your question so I'm posting this as an answer.

There's many css menu codes online. A simple google search will give you many results. If you can't add an image using css and you haven't given any sample code to show what you want so I recommend you use something like http://cssmenumaker.com/

Upvotes: 0

Related Questions