Drop menu o menu a tendina

ONE313

Utente Attivo
10 Set 2016
37
2
8
Buongiorno

ho creato un div con un listato dove mi compaiono le bandierine, il problema è che faccio scomparire le l'ul secondario ma non riesco a farlo ricomparire passando con il mouse sopra alla bandiara quando provo il codice. ho provato con l'hover che fa ricomparire il listato quando passi sopra

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style>

#divdropflag{width:300px; height:300px;}
#dropflag{list-style:none; background:#CCCCCC; }
#dropflag ul {list-style:none;}
#dropflag a{color:#FFFF66;}
#dropflag ul li{background:#00CC99;display:none;}

</style>

</head>
<body>
<div id="divdropflag">
<ul id="dropflag">
    <li><a href="#"><img src="flags-ita.gif"/>fdsv</a></li>
        <ul>
            <li><a href="#" ><img src="flags-ita.gif"/>hdh</a></li>
            <li><a href="#" ><img src="flags-ita.gif"/>sdg</a></li>
            <li><a href="#" ><img src="flags-ita.gif"/>sdf</a></li>
        </ul>

</ul>
</div>
</body>
</html>
 

cris8380

Moderatore
Membro dello Staff
MOD
3 Giu 2016
261
14
18
38
Ciao,
Prova a chiudere </ul> dopo:
HTML:
<li><a href="#"><img src="flags-ita.gif"/>fdsv</a></li>
eliminando l'altro </ul> finale
 

ONE313

Utente Attivo
10 Set 2016
37
2
8
Non si puo perche crea un altra lista oltre a quella che ho. lo sbaglio sta nel </li > del primo listato che deve inglobare quelli seguenti. pero non riesco ancora a farle comparire al passaggio
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title></title>
<style type="text/css">
#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

ul#cm-nav ,
ul#cm-nav ul {
 list-style-type: none;
 border-right: black 1px solid;
 border-bottom: black 1px solid;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li {
 list-style-type: none;
 position: relative;
 padding: 0px;
 margin: auto;
 list-style-image: none
}

ul#cm-nav li li {
 width: auto;
 float: none
}

#cm-nav a {
 font-size: 9pt;
 text-decoration: none;
 border-top: black 1px solid;
 font-family: verdana;
 background: #d6d5f0;
 white-space: nowrap;
 color: black;
 text-align: left;
 padding: 5px;
 border-left: black 1px solid;
 display: block
}

#cm-nav a:focus {
 outline-width: medium;
 outline-style: none;
 outline-color: invert
}

#cm-nav a.no-click {cursor: default}

#cm-nav > li > a ,
#cm-nav > li > a.arrow {padding-right: 4px}

.arrow-pad#cm-nav > li > a ,
#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#cm-nav li:hover > a {
 color: white;
 background-color: #807fb0
}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 position: absolute;
 z-index: 999;
 display: none
}

#cm-nav li:hover ul ,
#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}

#cm-nav ul ul {margin-left: 0px}

#cm-nav ul {
 left: 0px;
 top: 0px
}
</style>
</head>
<body style="background:#FFFFFF">
<div style="display: table">
<ul id="cm-nav" class="arrow-pad">
   <li><a href="#" class="arrow no-click"><img src="flags-ita.gif"/>fdsv</a></a>
      <ul>
         <li><a href="#"><img src="flags-ita.gif"/>hdh</a></li>
         <li><a href="#"><img src="flags-ita.gif"/>sdg</a></li>
         <li><a href="#"><img src="flags-ita.gif"/>sdf</a></li>
      </ul>
   </li>
</ul>
</div>
</body>
</html>
 

ONE313

Utente Attivo
10 Set 2016
37
2
8
A cosa servono tutti quegli ul e li e non è troppo lungo il css per il mio codice?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Servono se vuoi aggiungere degli ulteriori sottomenu.
Io ti ho fatto un codice perchè il tuo proprio non funzionava e non si capiva molto di ciò che volevi, se è troppo lungo adattalo alle tue esigenze, il mio è solo un esempio e un punto di partenza, non pretendevo di fare un menu spiccicato ai tuoi gusti
 
Discussioni simili
Autore Titolo Forum Risposte Data
J Drop down menu HTML e CSS 0
M Creare un menu drop-down in app Android Sviluppo app per Android 1
D Come posso rendere obbligatorio un drop down menu? Javascript 12
S AIUTO piccola modifica Drop Down Menu Javascript 0
D Menu Drop Down HTML e CSS 0
F Drop Down Menu compatibile con internet explorer HTML e CSS 0
J Animated Drop Down Navigation Menu Javascript 0
Z Recupero Values da Drop Down menu: Questioni PHP 0
U Aiuto per Drop Down Menu tre livelli PHP 0
G menu orizzontale drop-down HTML e CSS 0
X-Zeus Drop-Down Menu in php PHP 3
M [PHP] Drop down in campo select PHP 1
M [PHP] Interrompere DROP TABLE con PDO PHP 0
L [Javascript] Drag and drop. Aggiornamento Campo Javascript 2
S Problema drop-down box PHP 22
R Drop database jolly MySQL 1
J Jquery ui drag drop move jQuery 0
G Piccolo problema con il Drag&Drop jQuery 0
P sito e-commerce drop shipping E-Commerce 3
S Selezionare files con drag and drop prima di upload PHP 0
A funzione per popolare un drop down list Javascript 4
A Drag and drop per ipad , questo sconosciuto... Javascript 1
R ordinamento immagini con drag and drop e memorizzazione db PHP 1
A copiare dati in mysql con drag & drop jQuery 0
P drag e drop disabilitato con jquery Javascript 1
max1974 grid e json con drag e drop jQuery 0
M Upload con drag and drop PHP 1
zighy memorizzare gli elementi di un drag n drop Javascript 4
zighy drag drop Javascript 11
D Drag and drop immagini non compatibile con FF Javascript 1
D Drag & drop HTML5. Problema con ie e chrome! HTML e CSS 1
renegade Vendo Agenda prenotazioni sistema Drag & Drop Offerte e Richieste di Lavoro e/o Collaborazione 0
WorldWideWeb Drag&Drop su TreeView Visual Basic 0
L java,oggetti grafici e drag and drop Java 2
Trogo Mysql: Drop all tables MySQL 0
J FAQ Drop Down script Javascript 0
J Drag and drop in vb Visual Basic 1
N drag & drop Flash 1
E drag & drop Flash 1
D drop down & flash Javascript 0
S errore nel compilare una drop down list ASP.NET 0
M complesso drag&drop Flash 0
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0

Discussioni simili