[Jquery] [JavaScript] Pionowa lista rozwijana Opcje

[Jokeer]

Cześć wszystkim,

mój problem jest tematem dość znanym. Udało mi się znaleźć kilka rozwiązań niestety żadnego nie mogę dostatecznie zmodyfikować, żeby pasował do mojego kodu. Chodzi mi o zrobienie pionowego rozwijanego menu. Próbowałem metod z .css i jquery, gdzie w większości dodawany jest parametr

ul {visibility: hidden;} a mój kod menu prezentuje się nastepująco:

[HTML] pobierz, plaintext 
<div id="templatemo_menu_wrapper">
 
	<div id="templatemo_menu">
 
        <ul>
            <li><a href="#"><span></span>Strona główna</a></li>
            <li><a href="#" target="_parent"><span></span>O nas</a></li>
	    <li><a href="#" target="_parent"><span></span>Galeria</a></li>
            <li><a href="#" target="_parent"><span></span>NSP 1</a></li>
	    <li><a href="#" target="_parent"><span></span>NSP 2</a></li>
            <li><a href="#" target="_parent" class="last"><span></span>Kontakt</a></li>
        </ul>    	
 
    </div> <!-- end of templatemo_menu -->
 
</div> <!-- end of templatemo_menu_wrapper -->
[HTML] pobierz, plaintext 

Styl tej częśći wygląda tak:

[HTML] pobierz, plaintext 
#templatemo_menu_wrapper {
	width: 100%;
	height: 120px;
	margin: 0 auto;	
	background: url(../../images/templatemo_menu_bg_wrapper.jpg) no-repeat center top;
}
 
#templatemo_menu {
	width: 1190px;
	height: 70px;
	margin: 0 auto;
	padding-top: 20px;
	background: url(../../images/templatemo_menu_bg_wrapper.jpg) no-repeat center top;
}
 
#templatemo_menu_gora {
	width: 1190px;
	height: 40px;
	margin: 0 auto;
	padding-top: -20px;
 
}
 
#templatemo_menu ul {
	width: 930px;
	margin: 0px auto;
	padding: 0px;
	list-style: none;
}
 
#templatemo_menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
}
 
#templatemo_menu ul li a {
	position: relative;
	float: left;
	display: block;
	width: 130px;
	margin-right: 2px;
	height: 50px;
	padding: 29px 0 0 0;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
	color: #ffffff;	
	font-weight: bold;
	outline: none;
}
 
#templatemo_menu ul li a span {
	position: absolute;	
	top : 0px;
	right: -2px;
	width: 2px;
	height: 70px;
	background: url(../../images/templatemo_divider.png) right no-repeat;
}
 
#templatemo_menu li a:hover, #templatemo_menu li .current {
	background: url(../../images/templatemo_menu_mouse_hover.png) center no-repeat;
}
 
#templatemo_menu li .last span {
	background: none;
}
[HTML] pobierz, plaintext 

Potrzebuje zrobić dodatkowe, rozwijane opcje dostępne dla:

[HTML] pobierz, plaintext 
            <li><a href="#" target="_parent"><span></span>NSP 1</a></li>
	    <li><a href="#" target="_parent"><span></span>NSP 2</a></li>
[HTML] pobierz, plaintext 

Jak widać całe moje menu jest oparte na elemencie <ul>, dlatego nie mogę ustawić go na hidden, bo zwyczajne nic wtedy nie widać.

Czy zielony w tym temacie może liczyć na Waszą pomoc? (IMG:style_emoticons/default/smile.gif)

Ten post edytował Jokeer 2.12.2014, 21:37:13

[trueblue]

ul na pewno nie może być bezpośrednim dzieckiem ul.
Poczytaj trochę więcej o html i css.
http://jsfiddle.net/xe4u3vjo/