Visualizzazione risultati 1 fino 2 di 2

Discussione: Menù tendina

  1. #1
    Guest

    Predefinito Menù tendina

    Salve seguendo una guida ho creato questo menù a tendina per il mio sito, ho fatto alcune modifiche adatte e adesso vorrei sapere la larghezza e altezza esatte del rettangolo della lista, per farmi capire meglio, larghezza e altezza della casella dei sotto menù, voglio fare qualche prova mi servirebbe sapere, voi sapete trovarla?
    Codice:
    #cssmenu,
    #cssmenu > ul {
      background:#06659f;
      padding-bottom: 3px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
    }
    #cssmenu:before,
    #cssmenu:after,
    #cssmenu > ul:before,
    #cssmenu > ul:after {
      content: '';
      display: table;
    }
    
    #cssmenu:after,
    #cssmenu > ul:after {
      clear: both;
    }
    #cssmenu {
      width: auto;
      zoom: 1;
    }
    #cssmenu > ul {
      background:#06659f;
      margin: 0;
      padding: 0;
      position: absolute;
      margin-left:30%;
    
      
    }
    #cssmenu > ul li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #cssmenu > ul > li {
      float: left;
      position: relative;
    }
    #cssmenu > ul > li > a {
      padding: 23px 26px;
      display: block;
      color: white;
      font-size: 13px;
      text-decoration: none;
      text-transform: uppercase;
      text-shadow: 0 -1px 0 #0d0d0d;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
      line-height: 18px;
    }
    #cssmenu > ul > li:hover > a {
      background: url(highlight-bg.png) repeat;
      text-shadow: 0 -1px 0 #97321f;
      text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
    }
    #cssmenu > ul > li > a > span {
      line-height: 18px;
    }
    #cssmenu > ul > li.active > a,
    #cssmenu > ul > li > a:active {
      background-color:#06659f;
      background-image:url(../IMG/icon.png);
      background-repeat:no-repeat;
      background-position:left;
     
      
    }
    /* Childs */
    #cssmenu > ul ul {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 120px;
      background-color:#06659f;
      margin: 0;
      padding: 0;
      z-index: -1;
    }
    #cssmenu > ul li:hover ul {
      opacity: 1;
      visibility: visible;
      margin: 0;
      color: #000;
      z-index: 2;
      top: 64px;
      left: 0;
    }
    #cssmenu > ul ul:before {
      content: '';
      position: absolute;
      top: -10px;
      width: 100%;
      height: 10px;
      background: transparent;
    }
    #cssmenu > ul ul li {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
    }
    #cssmenu > ul ul li a {
      padding: 18px 26px;
      display: block;
      color: #FFF;
      font-size: 13px;
      text-decoration: none;
      text-transform: uppercase;
      width: 150px;
      border-left: 4px solid transparent;
      -webkit-transition: all 0.35s ease-in-out;
      -moz-transition: all 0.35s ease-in-out;
      -ms-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out;
    }
    #cssmenu > ul ul li a:hover {
    	background-image: url(../IMG/icon.png) ;
    	background-repeat:no-repeat;
    	background-position:left;
      
    }
    #cssmenu > ul ul li a:active {
    	background-color:06659f;
    }

  2. #2
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Senza sapere cosa e' impostata la struttura HTML e' difficile capire l'ordine gerarchico del menu ...
    analizzando il foglio di stile , e' presumibile pensare che in nodo con piu' parent sia l'elemento che cerchi :
    /* Childs */
    #cssmenu > ul ul li {
    ...
    width: 100%;
    }

    #cssmenu > ul ul li a {
    ...
    width: 150px;
    ...
    }

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •