Poniższy kod przedstawia 2 poziomowe rozwijane menu zrobine za pomocą CSS. Ja chciałbym zrobić 3 poziomowe jednak nie bardzo wiem jak zmodyfikować kod CSS, żeby to było możliwe. Proszę o wyrozumiałość bo w CSS jeszcze raczkuje.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu rozwijane pionowe - demo</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.menu li {list-style: none;}
.menu, #menu ul {width: 160px;}
.menu ul {visibility: hidden; position: absolute; top: 0; left: 100%; padding-left: 1px;}
.menu li {padding-bottom: 1px; line-height: 0; position: relative;}
.menu li:hover ul {visibility: visible;}
.menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; width: 140px; color: #fff; background-color: #666;}
.menu li:hover a, #menu li:hover li:hover a {background-color: #333095;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Link 1</a>
<ul class="menu">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
</ul>
</li>
</ul>
</body>
</html>
Pozdrawiam. Draqun