[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?

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

[trueblue]

http://jsfiddle.net/nx03pgzt/

[Jokeer]

Po pierwsze dziękuje za zainteresowanie!!!

Po drugie, jednak kiedy zastosowałem to rozwiązanie u siebie to menu w ogóle się nie wyświetla

Zapewne jest to wina:

[HTML] pobierz, plaintext 
#templatemo_menu ul{
    display:none;
}
[HTML] pobierz, plaintext 

Moje menu wygląda teraz tak:

[HTML] pobierz, plaintext 
<div id="templatemo_menu_wrapper">
 
	<ul 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>
			<ul>
				<li><a href="#" target="_parent"><span></span>Test</a></li>
			</ul>
	    </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>    	
 
    </ul> <!-- end of templatemo_menu -->
 
</div> <!-- end of templatemo_menu_wrapper -->
[HTML] pobierz, plaintext 

Plik css natomiast:

[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;
}
ul{
    margin:0;
        padding:0;
 
}
#templatemo_menu>li{
    list-style:none;
    float:left;
}
#templatemo_menu ul{
    display:none;
}
#templatemo_menu li:hover>ul{
    display:block;
}
[HTML] pobierz, plaintext 

Nie potrafie wyeliminować <ul> na początu menu a widzę, że to powoduje problemy.

Czy mogę prosić o pomoc jeszcze raz? Co mogę jeszcze zmodyfikować, żeby to zadziałało?

Dzięki!!!
Pozdrawiam.

[trueblue]

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