CODEWITHSUNDEEP
htmlcss
gilmoreja
gilmoreja

Reputation: 53

adding background image to list or anchor tag in navigation menu

I have a navigational menu which has a background color set. When you hover over the anchor tag within the navigation the background color changes. Standard stuff.

However, I am trying to get a background image to appear below the anchor tag to give better visual and user experience. The problem I am having is that the background-image sits within the anchor tag and I want it to sit below the anchor tag. I know IE does not support li:hover so adding to the li won't work.

Any help would be gratefully appreciated.

Here is the code:

<style>
#nav {
    display: block; 
    height: 40px;
    line-height: 35px; 
    list-style: none outside none; 
    margin: 20px auto 0 auto; 
    position: relative; 
    max-width: 750px; 
    min-width: 750px; 
    width: 78.2%;
}

#nav li {
    display: inline;
    text-align: center;
    float:left;
}

#nav li a{
    color: #fff; 
    display: block; 
    float: left; 
    font-family: HelveticaNeue-light,Helvetica,sans-serif; 
    font-size: 1em; 
    height: 100%; 
    padding: 0px 23px 0; 
    text-align: center; 
    text-decoration: none;
    line-height: 40px;
    background:#4D4D4D; 
}

#nav li a:hover, #nav .active a {
    background: url("../../images/navArrow.png") no-repeat bottom  center #a4c723;
    color: #4d4d4d;
}
</style>

<html>
<ul id="nav">
    <li><a href="home.html">home</a></li>
    <li><a href="services.html">services</a></li>
    <li><a href="about.html">about</a></li>
    <li><a href="somethingElse.html">somethingElse</a></li>
    <li><a href="AnotherSomething.html">AnotherSomething</a></li>

</ul>
</html>

Upvotes: 2

Views: 6693

Answers (2)

peduarte
peduarte

Reputation: 1677

Here, you can do that by adding a <span> inside the anchor tag, and absolute position it under the anchor. (font forget to add position:relative; to the <li>'s)

I have created an example for you: http://jsfiddle.net/peduarte/5PbKD/

*EDIT*

As per your first comment below: To center it, you give the span a left value of 50% and a negative margin-left value of half of the image's width.
If the image is 100px width, the margin-left will be -50px

Exmample: http://jsfiddle.net/peduarte/5PbKD/1/

Upvotes: 1

SpaceBeers
SpaceBeers

Reputation: 13947

You could add a sub menu to each list item. eg:

<li><a href="home.html">home</a>
    <ul>
       <li>ARROW</li>
    </ul>
</li>

Then use CSS to show/hide it on hover. If you put your image in the sub menu li that would make it appear below.

Upvotes: 0

Related Questions