Problema Drop-Down Menù

[andrew22]

Ciao a tutti,
devo realizzare un sito con css per un compito di scuola.
Ho scaricato da internet un template in cui è presente un drop-down menù, e ho provato ad inserire un ulteriore sottomenù. Quando passo con il mouse per aprire il sottomenù però, non me lo visualizza affianco al "genitore", ma me lo sposta dove vuole lui. Ho provato anche con il comando left, ma non si aggiusta. Come posso sistemare il codice??

Questo è il codice:

/* menu */
#mainmenu { 
	float: right; 
	padding: 39px 0 0; 
}
#menu ul { 
	float: right; 
}
#menu li { 
	display: inline; 
	float: left; 
	margin: 0 0 0 18px; 
}

#menu li a {   
	display: block; 
	color: #999; 
	padding: 7px; 
	font-size: 1.1em; 
	border: 1px solid transparent; 
}
#menu a:hover, #menu li.current a {
	border-color: #444;  
}
#menu li ul {  			/*Drop-Down Menù*/
	top: 98px;
	background: url(../images/dot.png); 
	padding: 3px;
	font-size: .92em; 
	position: absolute; 
	display: none; 
	z-index: 100; 	
}
#menu li ul li { 
	float: none; 
	display: inline; 
	margin: 0; 
	padding: 0; 
	clear: left;
}

#menu li ul li a {
	color: #fff;
	margin: 4px; 
	white-space: nowrap;
	padding: 8px;	
}
#menu li ul li a:hover {
	background: #2C2D2F;
	border-color: #2C2D2F;
}

/*Pezzo che ho aggiunto io*/

#menu ul ul{
    margin:2px 0 0;
    display:inline-block;
	list-style: none;
    visibility:hidden;
    position: relative;
    down: 400px;
	left: 160px;
	margin: 0; 
	padding: 0;
}
#menu ul li:hover > ul {
	visibility:visible;
}

Grazie

[andrew22]

Nella cartella ho trovato anche questo codice in JavaScript

var jMenu_timeout    = 300;
var jMenu_effectTime = 200;
var jMenu_closetimer = 0;
var jMenu_ddmenuitem = 0;
var jMenu_openid = 0;
var jMenu_action = false;
function jMenu_open()
{
	jMenu_canceltimer();
	
	if($("a", this).html() == jMenu_openid)
		return;
		
	if(jMenu_action)
		return;
		
	jMenu_close();

	if($("ul", this).size() == 0)
		return;
	
	jMenu_action = true;
	jMenu_ddmenuitem = $(this).find('ul').fadeIn(jMenu_effectTime, function() {jMenu_action = false;});
	jMenu_openid = $("a", this).html();
	if (document.getElementById('ul'))
		document.getElementById('ul').className = 'current';
}

function jMenu_close()
{
	if(jMenu_action)
		return;
			
	if(jMenu_ddmenuitem)
	{
		jMenu_action = true;
		jMenu_ddmenuitem.fadeOut(jMenu_effectTime, function() {jMenu_action = false;});
		jMenu_ddmenuitem = null;
		jMenu_openid = null;
	}
}

function jMenu_timer()
{
	jMenu_closetimer = window.setTimeout(jMenu_close, jMenu_timeout);
}

function jMenu_canceltimer()
{
	if(jMenu_closetimer)
	{
		window.clearTimeout(jMenu_closetimer);
		jMenu_closetimer = null;
	}
}

$(document).ready(function() {
	$('#menu > li').bind('mouseover', jMenu_open)
	$('#menu > li').bind('mouseout',  jMenu_timer)
	$('#menu > li > ul').bind('mouseover',  jMenu_canceltimer)
	$('#menu > li > ul > li').bind('mouseover',  jMenu_canceltimer)
});

document.onclick = jMenu_close;

[Mich_]

Ci sono molti e bellissimi esempi di menu a piu` livelli, che puoi studiare e anche copiare (rispettando i rispettivi copyright).

Puoi partire da quelli citati tra i "link utili" (a me piace l'organizzazione di CSSplay)

[andrew22]

è che mi piace il layout originale ma non riesco a sistemare correttamente il sottomenù!!

Comunque grazie sono belli i menù che mi hai consegnato!

[Mich_]

In linea di massima e` abbastanza semplice modificare le dimensioni, i colori, il carattere di un menu. Piu` difficile e` modificare il modo in cui si apre, la direzione dei "popup", e il comportamento in base alla posizione del mouse.

Quindi il mio consiglio e` partire da un menu che si comporta bene (= come piace a te) e modificarne i dettagli.

[andrew22]

mmmm....piccolo problemino....
il sito è praticamente finito e non credo di riuscire a trovare un menù che stia bene con il mio layout e dovrei modificare tutte le pagine per far coincidere i codici

[Mich_]

Originariamente inviato da andrew22
mmmm....piccolo problemino....
il sito è praticamente finito e non credo di riuscire a trovare un menù che stia bene con il mio layout e dovrei modificare tutte le pagine per far coincidere i codici

Queste affermazioni suonano strane ...

Un menu e` comunque fatto da una lista (o eventualmetne da liste annidate, se a piu` livelli)
Quindi l'HTML non e` da cambiare.

Il CSS sara` da includere uguale in tutte le pagine, ma quello lo hai gia` pronto: basta che sostituisci il CSS che hai fatto con quello nuovo.
In tale CSS dovrai sistemare i nomi delle classi in modo da farle coincidere con quelle inserite nel tuo HTML, ma questa e` una cosa da fare una volta sola per tutti.
E chiaramente devi sistemare i colori e i caratteri come hai gia` fatto nel tuo CSS originale, ma anche questo lo fai una volta sola per tutti e lo copi dal tuo CSS.

[andrew22]

Sisi mi sono sbagliato ad esprimere!! Quello che volevo dire è quello che hai detto tu!!

[Mich_]

andrew22 ha scritto un messaggio il giorno 30-05-2013 17:33:
Ciao Mich_
sono riuscito a posizionare orizzontalmente il tutti i sottomenù nella posizione giusta, ma non riesco a spostarlo verticalmente in nessun modo e rimane più basso senza poterlo raggiungere in nessun modo...
non è che mi potresti dire quali sono i comandi per per spostare un oggetto??

Grazie Andrea

Meglio che le risposte restino nel forum, a disposizione di tutti.

Non esiste UN comando per spostare un oggetto, ne esistono molti, da applicare a seconda delle condizioni e delle circostanze.

Posta un link alla tua pagina (eventualmente mettila su un sito di prova - alcuni consigli nel regolamento)

[andrew22]

Ho pubblicato temporaneamente il sito...i contenuti devono ancora essere finiti e per ora ho caricato soltanto l' index e la pagina "letteratura" che contiene i sottomenu.

Dante --> Divina Commedia
Petrarca --> Canzoniere
Boccaccio --> Decamerone

http://unannoinunclick.altervista.org/letteratura.html


Il mio problema è che non riesco a spostare verticalmente il sottomenù per farlo coincidere con il "genitore"