• User Attivo

    menu a tendina 3 livelli

    Ciao a tutti!
    Sto cercando di finire un menù a tendina ma non riesco a capire 2 cose.
    Ecco il codice

    <link href="css/menu_pette.css" rel="stylesheet" type="text/css" />
    
    
    <div id="menu_marchesini">
      <ul>
        <li><a href="#">Menu 1</a>
          <ul>
            <li><a href="#">il complesso</a></li>
            <li><a href="#">appartamento nuovo</a>
              <ul>
                <li><a href="#">Menu 1-2-1</a></li>
                <li><a href="#">Menu 1-2-2</a></li>
            <li><a href="#">Menu 1-2-3</a></li>
          </ul>
              </li>
              <li><a href="#">Menu 1-3</a></li>
          </ul>
         </li>
         <li><a href="#">Menu 2</a>
           <ul>
         <li><a href="#">Menu 2-1</a></li>
         <li><a href="#">Menu 2-2</a></li>
         <li><a href="#">Menu 2-3</a></li>
           </ul>
         </li>
         <li><a href="#">Menu 3</a>
           <ul>
         <li><a href="#">Menu 3-1 anche voglia</a></li>
             <li><a href="#">Menu 3-2</a></li>
         <li><a href="#">Menu 3-3</a>
           <ul>
             <li><a href="#">Menu 3-3-1</a></li>
             <li><a href="#">Menu 3-3-2</a></li>
             <li><a href="#">Menu 3-3-3</a></li>
           </ul>
         </li>
          </ul>
        </li>
      </ul>
    </div>
    

    e il css

    body{
        background-color: #c2c3c1;
    }
    
    
    #menu_marchesini{
    padding:0;
    maragin:0;
    z-index: 1000;
    
    }
     li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
    z-index: 1000;
    }
     li a{
        
    height: 40px;
    display: block;
    text-decoration:none;
    text-align: left;
    line-height: 40px;
    color: #333;
    background: none;
    z-index: 1000;
    padding-left:10px;
    }
     li a:hover{
    background: none;
    
    }
     ul ul{
        position: absolute;
        top: 40px;
        visibility: hidden;
        font: 14px Arial, Helvetica, sans-serif;
        z-index: 1000;
        background-color: cadetblue;
        text-align:left;
    }
    
    
     ul ul li a{
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: left;
    line-height: 30px;
    color:;
    background: none;
    z-index: 1000;
    padding-left:10px;
    width: 200px;
    }
     ul{
    padding:0;
    margin:0;
    font: italic bold 18px Georgia, "Times New Roman", Times, serif;
    }
     ul li:hover ul {
    
    visibility:visible;
    z-index: 1000;
    }
     ul ul li a:hover{
    background: maroon none;
    
    } ul ul ul li {
    visibility: hidden;
    left:210px;
    top:-40px;
    background-color: black;
    width: 200px;
    }
     ul ul ul li a:hover{
    background: yellow;
    
    }
    
    
     ul ul li:hover ul li {
    visibility:visible;
    }
    

    Quando passo sopra al primo che contiene 2 livelli mi appare un pezzetto in più che non riesco a eliminare e capire e l'errore.
    Inoltre non riesco a sistemare l'hover del 3 livello che ha 10px in più di padding... Riuscite a darmi una mano? Grazie!


  • User Attivo

    Ciao,
    se non hai ancora risolto, eccoti alcune dritte.

    1- Usa display al posto di visibility perchè "visibility" tiene occupato lo spazio relativo

    2- > #menu_marchesini li a:hover
    diventa ul ul li ul

    3- > ul ul ul li a:hover{
    background: yellow;
    }
    diventa
    ul ul ul li a:hover{
    background: yellow;
    width: 190px;
    }

    dovrebbe essere tutto

    😉


  • User Attivo

    Grazie!
    Ecco come ho risolto:

    body{
    background-color: #c2c3c1;
    }
    #menu_sito{
    padding:0;
    margin:0;
    z-index: 1000;
    } ul{
    padding:0;
    margin:0;
    font: italic bold 18px Georgia, "Times New Roman", Times, serif;
    } li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
    z-index: 1000;
    } li a{
    height: 40px;
    display: block;
    text-decoration:none;
    text-align: left;
    line-height: 40px;
    color: #333;
    background: none;
    z-index: 1000;
    padding-left:12px;
    padding-right: 12px;
    } li a:hover{
    background: none;
    } ul li:hover ul{
    visibility:visible;
    z-index: 1000;
    } ul li:hover ul ul{
    visibility:hidden;
    z-index: 1000;
    } ul ul{
    position: absolute;
    top: 40px;
    visibility: hidden;
    font: 14px Arial, Helvetica, sans-serif;
    z-index: 1000;
    background-color: cadetblue;
    text-align:left;
    } ul ul li a{
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: left;
    line-height: 30px;
    color:;
    background: none;
    z-index: 1000;
    width: 176px;
    } ul ul li a:hover{
    background: #171717;
    color: #f87a2b;
    } ul ul li:hover ul{
    visibility:visible;
    } ul ul ul{
    visibility: hidden;
    position:absolute;
    left:200px;
    top:0;
    background-color: black;
    width: 200px;
    } ul ul ul li a{
    margin:0;
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: left;
    color:;
    background: none;
    z-index: 1000;
    } ul ul ul li a:hover{
    background: yellow;
    }