I am working on a project and having trouble with my UL>LI style.
i am trying to put images all over the list and i want when i hover over the link the image color change so i use 2 images
1 orange & 1 blue
but i am unable to centrise the images over top navigation links.
the codes are :
HTML:
<div id="TopMenu">
<ul style="display:">
<li class="HeaderLiveChat" style="display:none"></li>
<li class="First" style="display:">
<a href="/account.php">My Account</a>
</li>
<li style="display:">
<a href="/orderstatus.php">Order Status</a>
</li>
<li style="display:">
<a href="/wishlist.php">Wish Lists</a>
</li>
<li>
<a href="/giftcertificates.php">Gift Certificates</a>
</li>
<li class="CartLink" style="display:">
<a href="/cart.php">
</li>
<li style="display:">
<div>
<a onclick="" href="/login.php">Sign in</a>
or
<a onclick="" href="/login.php?action=create_account">Create an account</a>
</div>
</li>
</ul>
<br class="Clear">
</div>
CSS:
/* Top Navigational Menu */
#TopMenu {
position: absolute;
right: 10px;
top: 70px;
font-size: 10px;
text-align: right;
}
#TopMenu ul, #TopMenu li {
list-style: none;
padding: 0;
margin: 0;
}
#TopMenu ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0px;
padding: 0px 4px 0 6px;
}
#TopMenu ul li.First {
border-left: 0;
}
#TopMenu ul li.home {
background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat;
height:16px; width:16px;
}
#TopMenu a {
color: #333;
}
#TopMenu a:hover, #TopMenu a:visited {
color: #333;
}
#TopMenu li div {
display: inline;
}
Please kindly help me to solve this
NOTE:
I want changed icon over each link, the above image is just an example image
Thank you
Made two changes
Added a top padding of 25px to li for the image
#TopMenu ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0px;
padding: 25px 4px 0 6px;
}
changed the logos background-position:center;
( Please note that I have used short hand notation )
#TopMenu ul li.home {
background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat center;
height:16px; width:16px;
}
#TopMenu ul li.home:hover {
background:url('http://cdn1.iconfinder.com/data/icons/cologne/16x16/home.png') no-repeat center;
}
Working Demo : http://jsfiddle.net/naveen/HuTge/1/
P.S: Please note that I am using #TopMenu
and markdown is not working properly.