This technique works based on lists. By changing the list's "display" to none in CSS code, we can actually hide the lists that are located into another list. They can be unhide every time the user hover the mouse over the parent menu. For this experiment I created only 2 menus, and inside these menus I added more lists. I found that this technique can be used for sitemap, so the users can navigate to all parts of website by using only one drop down menu fast and easy. I have created a menu called "cool sites" and I linked to my favorite websites, and the other menu is basically a sitemap or a shortcut to my pages.
By adding these codes to the lists that are inside another list we can actually hide them:
.menu ul li ul {display: none;}
.menu ul li a, .menu ul li a:visited { overflow:visible}
And by using these code we can unhide whenever we go over them with mouse pointer:
.menu ul li:hover a {color: #231D12; background: url(img/nav-hover.jpg);}
.menu ul li:hover ul {display:block; position:absolute; top:31px; left:0; width:115px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: block;}
.menu ul li:hover ul li a {display:block; background: url(img/nav.jpg); color:#000;}
.menu ul li:hover ul li a:hover {background: url(img/nav-hover.jpg); color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
I wrote the CSS code inside the HTML so they can be viewed easily.