Drop menu o menu a tendina

ONE313 · 10 Set 2016

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 · 10 Set 2016

Ciao,
Prova a chiudere </ul> dopo:

HTML:

<li><a href="#"><img src="flags-ita.gif"/>fdsv</a></li>

eliminando l'altro </ul> finale

ONE313 · 10 Set 2016

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 · 11 Set 2016

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 · 11 Set 2016

A cosa servono tutti quegli ul e li e non è troppo lungo il css per il mio codice?

Max 1 · 11 Set 2016

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

Cerca

Cerca

Drop menu o menu a tendina

ONE313

Utente Attivo

cris8380

Moderatore

ONE313

Utente Attivo

Max 1

Super Moderatore

ONE313

Utente Attivo

Max 1

Super Moderatore

Discussioni simili