How to make a submenu visible of a submenu via css? - html

Question

I want to make a submenu for a submenu and also change the background color of main menu and background color on hover of submenu. This is my code, what changes should I make? The green background is not visible in submenu and also the submenu of submenu.
#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;
}
#horizontalmenu li ul {
display: none;
position: absolute;
}
#horizontalmenu li: hover ul {
display: block;
background: red;
height: auto;
width: 8em;
background-color: green;
}
#horizontalmenu li ul li {
clear: both;
border-style: none;
}
Html
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
<li>Pakistaan</li>
</ul>
</li>
</ul>
</div>