CODEWITHSUNDEEP
htmlcss
Sean Marcus
Sean Marcus

Reputation: 91

Add an arrow at top of vertical navigation

Basically, I am trying to get an arrow at the top of my drop down menu like this http://dribbble.com/shots/678124-Notification-Dropdown?list=users

The problem is, I am not seeing the arrow when I add it into my page. I believe it is behind the list, but I just am stumped on how to do this in general.

My list is this 

<ul>
        <img src=\"images/icons/listarrow.png\">
        <li><a href=\"viewuser.php?uid=$liveuserid\"><img src=\"images/profilepics/$profilepic\">Your profile</a></li>
        <li><a href=\"settings.php?personal=all\">pic Settings</a></li>
        <li><a href=\"settings.php?addproject=all\">pic Add Project</a></li>
        <li><a href=\"settings.php?mail=all\">pic Mail</a></li>
    <li><a href=\"logout.php\">Logout pic</a></li>
 </ul></li></ul>"

Comes from PHP code so that's why I have the escape slashes. The CSS I use for the list

#usernav ul ul {

background: #ecebe8; 
border-radius: 0px; 
padding: 0;
position: absolute; 
top: 37px;
margin-left: 12px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-box-shadow: 0px 1px 4px #000;
-webkit-box-shadow: 0px 1px 4px #000;
box-shadow: 0px 1px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}


#usernav ul ul li {

padding: 0px;
float: none; 
position: relative;;
border: 0px;
background-color: white;
min-width: 0px;
width: 135px;

}

I am sure the path is right, maybe my html code for adding the image is just stupid, I don't know. Thanks!

Upvotes: 0

Views: 761

Answers (2)

bob
bob

Reputation: 849

you could give the img an id, and then set the height and width to what you want for the id in css

that should work, if not try wrapping the img in <li></li> tags

Upvotes: 0

tdh108
tdh108

Reputation: 70

You could do this with the before pseudo element.

ul:before {
border-bottom: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
height: 0;
position: absolute;
right: 0;
top: -10px;
width: 0;
}

This will create an arrow that appears at the top of the UL. Just be sure to apply relative positioning to the appropriate parent element.

Upvotes: 3

Related Questions