Witam wszystkich serdecznie. Posiadam zrobione 2 poziomowe menu lecz potrzebowałbym jednak trzy-poziomowe i niestety nie wychodzi mi. Nie mam pojęcia co robię źle. Pomoże mi ktoś z tym?
Kod HTML
<ul id="menu">
<li id="rozwijany"><a href="#"><img
src="grafika/....png" /></a>
<ul id="submenu">
<li><a href="#"><img src="grafika/....png" /></a></li>
<li><a href="#"><img src="grafika/....png" /></a></li>
</ul>
</li>
<li><a href="#"><img src="grafika/....png" /></a></li>
<li id="rozwijany"><a href="#"><img
src="grafika/....png" /></a>
<ul id="submenu">
<li><a href="#"><img src="grafika/....png" /></a></li>
<li><a href="#"><img src="grafika/....png" /></a></li>
<li><a href="#"><img src="grafika/....png" /></a></li>
</ul>
</li>
<li><a href="#"><img src="grafika/....png" /></a></li>
<li><a href="#"><img src="grafika/....png" /></a></li>
</ul>
Kod CSS
ul#menu
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
height: 100%;
width: 7em;
color: black;
margin-right:40px;
}
ul#menu li a
{
float: left;
width: 5em;
color: black;
padding: 0.05em 0em;
text-decoration: none;
}
ul#menu li a:hover
{
color: black;
}
ul#submenu
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 7em;
color: black;
margin-right:10px;
}
ul#submenu2
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 7em;
color: black;
margin-right:10px;
}
ul#submenu li a
{
float: left;
width: 5em;
padding: 0.05em 1em;
text-decoration: none;
}
ul#submenu li a:hover
{
color: black;
}
#rozwijany:hover li { display: block;}
#rozwijany li { display: none; }