I want to make a menu with different background color having a submenu and a nested submenu both with different background color . When I hover over submenu list then it should display nested submenu .How to do it ? . This is my code .
<html> <head> <title>Example of HTML Menu</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
}
</style>
</head>
<body>
<div id="horizontalmenu">
<ul>
<li>
<a href="#">News</a>
<ul>
<li>
<a href="#">National</a></li>
<li>
<a href="#">International</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Hollybood</a></li> </ul> </li>
<li> <a href="#">Technology</a>
<ul> <li><a href="#">IT/Software</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Iphone</a>
<ul class="horizontal"><li><a href="#">IT/Software</a></li> </ul></li>
<li><a href="#">Neuro-Science</a></li> </ul> </li>
<li> <a href="#">Sports</a>
<ul> <li><a href="#">Cricket</a></li>
<li><a href="#">Tenis</a></li>
<li><a href="#">Badminton</a></li>
<li><a href="#">Hockey</a></li> </ul> </li>
<li> <a href="#">Country</a>
<ul> <li><a href="#">India</a></li>
<li><a href="#">America</a></li>
<li><a href="#">France</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
} <div id="horizontalmenu">
<ul>
<li>
<a href="#">News</a>
<ul>
<li>
<a href="#">National</a></li>
<li>
<a href="#">International</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Hollybood</a></li> </ul> </li>
<li> <a href="#">Technology</a>
<ul> <li><a href="#">IT/Software</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Iphone</a>
<ul class="horizontal"><li><a href="#">IT/Software</a></li> </ul></li>
<li><a href="#">Neuro-Science</a></li> </ul> </li>
<li> <a href="#">Sports</a>
<ul> <li><a href="#">Cricket</a></li>
<li><a href="#">Tenis</a></li>
<li><a href="#">Badminton</a></li>
<li><a href="#">Hockey</a></li> </ul> </li>
<li> <a href="#">Country</a>
<ul> <li><a href="#">India</a></li>
<li><a href="#">America</a></li>
<li><a href="#">France</a></li>
</ul>
</li>
</ul>
</div> 
