• N
    User Newbie •

    Menu CSS

    Salve a tutti!

    Ringrazio anticipatamente coloro che vorranno essermi di aiuto in ciò che sto per esporvi, mi spiego meglio: ho un template con un menu scritto in CSS composto da 9 links, ho tentato di rimuovere dal file html le righe <li> relative ai links che non mi servono, ma il risultato è stato che i links mantengono la loro dimensione originaria e la lunghezza totale del menu diminuisce. Io vorrei o mantenere bloccata la lunghezza totale del menu e adattare i links affinchè occupino tutta la lunghezza dello stesso oppure mantenere la dimensione originaria sia del menu che dei links allineandoli però a sinistra. Grazie.

    Posto a seguire il contenuto del file CSS specifico per il menu in questione:

    nav {width:940px;margin:0 auto;z-index:99; position:relative;}
    .sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
    .sf-menu {}
    .sf-menu li {float:left;position:relative;font-size:0;line-height:0;}
    .sf-menu .last{background:none;}
    .sf-menu .first a{padding:11px 25px 15px 28px;border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;}
    .sf-menu .last a {padding:11px 32px 15px 23px;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0 10px 10px 0;}
    .sf-menu li a {
    display:block;
    color:#fff;
    font-size:14px;
    line-height:1.2em;
    text-shadow:1px 1px #cb5000;
    font-weight:bold;
    padding:11px 26px 15px 20px;
    background:url(../images/bg-menu-a.jpg) 0 0 repeat-x;
    position:relative;
    }
    .sf-menu li span{display:block; position:absolute; width:2px; height:100%; top:0; right:0; background:url(../images/bg-menu-li.jpg) 0 0 no-repeat;}
    .sf-menu li li {
    background:none;
    width:111px;
    position:relative;
    z-index:201;
    display:block;
    border-bottom:1px solid #e1e1e1;
    padding:4px 0 8px 0;
    }
    .sf-menu li .last{border:none;}
    .sf-menu li li a, .sf-menu .m1 li a {
    display:inline-block;
    font-size:15px;
    line-height:1.2em;
    color:#363636;
    text-shadow:none;
    padding:0;
    text-shadow:1px 0 #363636;
    padding-left:3px;
    }
    .sf-menu ul {
    position: absolute;
    top: -999em;
    z-index: 200;
    width: 111px;
    display:none;
    background:#fff;
    padding:16px 24px 14px 24px;
    border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
    box-shadow:0 0 2px 2px rgba(194,194,194,0.5);
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    left: 315px;
    top: 49px; /* match top ul list item height /
    left: 0;
    z-index: 200;
    position:absolute;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 191px; /     match ul width */
    top: -10px;
    }
    .sf-menu li:Hover a,
    .sf-menu li a:hover, .sf-menu .active a{
    background:url(../images/bg-menu-a.jpg) 0 -41px repeat-x;
    }
    .sf-menu li li a:hover, .sf-menu .active li a:hover {
    background:none;
    color:#f7a000;
    text-shadow:1px 0 #f7a000;
    }
    .sf-menu li li a, .sf-menu .m1 li a { background:none;}

    0
  • M
    User Attivo •

    Ciao, e benvenuto nel forum 🙂
    Dovresti mostrarci almeno l'html base del menu, per poterti rispondere correttamente.

    0
Effettua l'accesso per rispondere