Introduction
In this article you will learn how to insert an image in a list and anchor tag, like: <a href="#">
In this article I used the following images:
If you want a reversed image then you need to use:
#menu ul li ul li ul {
display: none !important;
right: 195px;
top: 0px;
position: absolute;
margin-right: 13px;
}
#menu ul li ul li.vertical a {
background: url(verticald.png) no-repeat!important;
margin-right: -13px;
}
#menu ul li ul li.vertical:hover a {
background: url(vertic.jpg) no-repeat!important;
}
The full code is given below.
<!DOCTYPE html>
<html>
<head>
<title>style</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: lighter;
text-transform: capitalize;
color: #fff;
}
#main {
width: 100%;
margin: 0px auto;
height: 600px;
}
#menubox {
margin-top: 15px;
height: 50px;
background: #666666;
width: 100%;
}
#menu {
margin: 0px auto;
width: 70%;
}
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
text-decoration: none;
display: block;
padding: 14px 50px 14px 50px;
background: #3300CC;
color: #FFFFFF;
}
#menu ul li a:hover {
background: #003366;
}
#menu ul li ul {
position: absolute;
display: none;
top: 27px;
width: 200px;
}
#menu ul li ul li {
position: relative;
float: none;
}
#menu ul li.home a {
background: url(homeBg.png)left top no-repeat !important;
padding: 14px 10px;
margin-top: 12px;
height: 34px;
width: 180px;
display: block;
}
#menu ul li ul li a {
border-bottom: 1px solid #666666;
background: #b2a9b0;
padding: 14px 10px;
}
#menu ul li:hover ul {
display: block;
}
#menu ul li.home:hover a {
background: url(home_hover.png) left top no-repeat !important;
}
#menu ul li ul li ul {
display: none !important;
left: 195px;
top: 0px;
position: absolute;
margin-left: 13px;
}
#menu ul li ul li ul li {
position: relative;
}
#menu ul li ul li ul li a {
}
#menu ul li ul li.vertical a {
background: url(verticalBg.png) no-repeat!important;
margin-left: -13px;
}
#menu ul li ul li:hover ul {
display: block !important;
}
#menu ul li ul li.vertical:hover a {
background: url(vertical.png) no-repeat!important;
}
#menu ul li ul li ul li ul {
visibility: hidden;
position: absolute;
left: 195px;
}
#menu ul li ul li ul li:hover ul {
visibility: visible;
}
</style>
</head>
<body>
<div id="main">
<div id="menubox">
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">aboutUs</a>
<ul>
<li class="home"><a href="#" class="home">design</a></li>
<li><a href="#">home</a>
<ul>
<li class="vertical"><a href="#">split</a></li>
<li><a href="#">commands</a></li>
<li><a href="#">window</a></li>
<li><a href="#">edit</a>
<ul>
<li class="vertical"><a href="#">home</a></li>
<li><a href="#">Modify</a></li>
<li><a href="#">text</a></li>
<li><a href="#">insert</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">css</a></li>
<li><a href="#">home</a></li>
</ul>
</li>
<li><a href="#">service</a></li>
<li><a href="#">application</a>
<ul>
<li class="home"><a href="#" class="home">common</a></li>
<li><a href="#">home</a>
<ul>
<li class="vertical"><a href="#">winsow</a></li>
<li><a href="#">files </a></li>
<li><a href="#">snippers</a></li>
<li><a href="#">network</a>
</li>
</ul>
</li>
<li><a href="#">site</a></li>
<li><a href="#">view</a>
</li>
</ul>
</li>
<li><a href="#">company</a></li>
<li><a href="#">contect us</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Output
