sottomenu stessa altezza di menu con voce attiva evidenziata

[mediasteno]

In un sito ho inserito un menu verticale a tendina. Posizionandosi su una voce del menu principale si apre il sottomenu. Ho due problemi:
1) il sottomenu deve partire dall'inizio della voce del menu principale e non dalla parte centrale


2) la voce del menu deve essere evidenziata quando si tratta di quella pagina. Cioè se io sono sulla pagina burro, allora la voce menu "Burro" deve essere evidenziata.

Credo che in entrambi i casi devo agire nel file js, ma avendo una scarsa conoscenza non so dove mettere mano

il codice js è:

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

mentre codice css

/*stile font menu */
.suckerdiv {line-height: 250%; font-family: 'Titillium Web', sans-serif; font-weight: bold; text-align: left; font-size:16px; padding-left:50px;}

.suckerdiv ul{margin: 30px 0 0 0; padding: 0; list-style-type: none; width: 200px; /* Width of Menu principale */}
.suckerdiv ul li{position: relative; background: url(pic/bg_prodotti.jpg) no-repeat right top;}

/*menu di secondo livello */
.suckerdiv ul li ul{font-size:14px; position: absolute; width: 120px; background-color:#1b5f82; /*sub menu width*/ top: 0; visibility: hidden;}

/* Stile dei link del menu di secondo livello */
.suckerdiv ul li a{display: block; overflow: auto; /*force hasLayout in IE7 */ color: #FFF; text-decoration: none; padding: 1px 5px; border-bottom: 0;}
.suckerdiv ul li a.active{background: url(pic/prodotti_clic.jpg) repeat right top;}
.suckerdiv ul li a:visited{}
.suckerdiv ul li a:hover{background: url(pic/prodotti_clic.jpg) repeat right top;}

.suckerdiv .subfolderstyle{}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }

codice html

			<div class="suckerdiv">
			<h1>I PRODOTTI</h1>
			<ul id="suckertree1">
			   <li><a href="#">Fior di Latte</a>
				  <ul>
					<li><a href="#" class="active">Fior di latte</a></li>
					<li><a href="#">Bocconcini</a></li>
					<li><a href="#">Treccine</a></li>
					<li><a href="#">Ciliegine</a></li>
					<li><a href="#">Nodini</a></li>
				  </ul>			   
			   </li>

			   <li><a href="#">Scamorze</a>
				  <ul>
					<li><a href="#">Scamorza</a></li>
					<li><a href="#">Scamorzina</a></li>
					<li><a href="#">Scam. Affum.</a></li>
				  </ul>			   			   
			   </li>

			  <li><a href="#">Burro</a>
				<ul>
					<li><a href="#">Burro</a></li>
				</ul>
			  </li>		  
			
			</ul>
			</div>
		</div>

 

[criric]

secondo me puoi risolvere modificando solo il css
per l'altezza prova modificando il top qui

.suckerdiv ul li ul{font-size:14px; position: absolute; width: 120px; background-color:#1b5f82; /*sub menu width*/ top: 0; visibility: hidden;}

metti top: -20px; o comunque l'altezza del tag li

 

[mediasteno]

ho risolto l'allineamento del sottomenu con il menu principale agendo sul foglio di stile. Ho azzerato questo margine

.suckerdiv ul{margin: 30px 0 0 0; }

agendo su top non ottenevo il risultato.
Ora mi rimane da capire perchè non viene visualizzata la pagina attiva. Penso che bisogna agire sul js dato che eliminando il richiamo, la voce attiva è evidenziata.

 

[criric]

prova assegnando la classe active

 ultags[t].parentNode.onmouseover = function() {
                    this.getElementsByTagName("a")[0].className = "active";
                    this.getElementsByTagName("ul")[0].style.display = "block"
                }
                ultags[t].parentNode.onmouseout = function() {
                    this.getElementsByTagName("a")[0].className = "";
                    this.getElementsByTagName("ul")[0].style.display = "none"
                }