CODEWITHSUNDEEP
htmlcss
user1539116
user1539116

Reputation: 1

Image passing over elements of a list on hover

So what I'm trying to make here is a simple horizontal css menu, however, whenever the user hovers over an item in the list, I want a little triangle to show up above the said item Here's what I've come up with so far HTML:

<div id="navbar2">
        <div id="navholder">
            <ul id="nav2">
                   <li>
                        <a href="#">category one</a>
                   </li>
                   <li>
                        <a href="#">section two</a>
                   </li>
                   <li>
                        <a href="#">articles</a>
                   </li>
                   <li>
                        <a href="#">posts here</a>
                   </li>
                   <li>
                        <a href="#">category two</a>
                   </li>
            </ul>
        </div>
  </div>

and the css applied to it:

ul#nav2
{
    background:url('images/redbar.png');
    list-style-type:none;
    height:50px;
}
#navbar2 ul li
{
    height:50px;
    display:inline;
    line-height:35px;
    padding-left:19px;
}
#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background:url('images/Project_0040_Layer-21.png') no-repeat;
 }
 #navbar2 ul li a 
{
    color:#fff;
    text-decoration:none;
    font-size:10pt;
    }

And even though i specify the background position at top center it simply doesnt show up at all... What am I doing wrong? link to jsfiddle: http://jsfiddle.net/wWMjF/1/ , i basically want the little triangle just above the text, pointing at it and not on the sides

Upvotes: 0

Views: 131

Answers (3)

Billy Moat
Billy Moat

Reputation: 21050

I knocked this up for you. Might be of some use.

http://jsfiddle.net/wWMjF/11/

Upvotes: 0

Zeta
Zeta

Reputation: 105876

Using the background shorthand property will set all unspecified properties to their initial value:

The ‘background’ property is a shorthand property for setting most background properties at the same place in the style sheet. [...] Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-image’, ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property's initial value, then assigns any explicit values specified for this layer in the declaration.

Either use 

#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background-image:url('images/Project_0040_Layer-21.png');
    background-repeat: no-repeat;
 }

or

#navbar2 ul li:hover 
 {  
    height:50px;
    background:url('images/Project_0040_Layer-21.png') no-repeat 50% 0%;
 }

in order to avoid this.

Upvotes: 0

NGLN
NGLN

Reputation: 43649

Concat the background styles to a single line:

#navbar2 ul li:hover
{  
    height:50px;
    background:url('http://i.imgur.com/dyj8m.png') no-repeat center 0;
}

See updated fiddle sample.

Upvotes: 3

Related Questions