Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    problema con menù orizzondale

    Ciao, sto realezzando un menù orizzondale con i css; in pratica, oltre a visualizzare i nomi dei menù in modo orizzondale, ogni volta che vi si passa con il mouse sopra esce un sotto-menù anch'esso orizzondale. C'è però un problema: nel momento del passaggio del mouse, il sotto-menù esce però mi fa spostare verso sinistra il nome del menù a fianco.
    Vi posto una parte del codice in modo che riuscirete a capire megio ciò che voglio dire.
    Grazie a tutti
    Ecco la parte di codice che mi da il problema:

    <!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=iso-8859-1" />
    <title>Documento senza titolo</title>
    </head>
    <style>
    #globalLink{
    position: absolute;
    top: 6px;
    height: 22px;
    min-width: 640px;
    padding: 0px;
    margin: 0px;
    left: 10px;
    z-index: 100;
    }
    a.glink, a.glink:visited{
    font-size: small;
    color: #000000;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
    }

    a.glink:hover{
    text-decoration: none;
    }
    #globalLink ul {
    display:block;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #globalLink li {
    display: inline;
    width:100%;
    float:left;
    margin: 0;
    padding: 0;
    }
    #globalLink li ul {
    overflow: hidden;
    display:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size:14px;

    }
    #globalLink li:hover ul {
    overflow: hidden;
    display:block;
    padding: 6px 0px 0px 0px;
    margin: 0;
    list-style-type: none;
    }
    #globalLink li li {
    overflow: hidden;
    float:left;
    display: inline;
    width:100%;
    padding: 3px 0px 0px 0px;
    text-decoration:none;
    }
    #globalLink li li a {
    overflow: hidden;
    float:left;
    display: inline;
    padding: 1px 0px 0px 0px;
    color:#000099;
    text-decoration:none;
    }
    </style>
    <body>
    <ul id="globalLink">
    [*]
    global link
    <ul>
    [*]prova1 |
    [*] prova1
    [/list]

    [*]
    global link
    <ul>
    [*]prova1 |
    [*] prova1
    [/list]

    [*]
    global link

    [/list]
    </body>
    </html>
    Un uomo è vecchio solo quando i rimpianti, in lui, superano i sogni. A. Einstein

  2. #2
    E' molto semplice: lo spostamento è dovuto al fatto che quando il sottomenù viene reso visibile, l'elemento che lo contiene ne assume le dimensioni. Se provi a mettere un border:1px solid red all'elemento[*] te ne accorgi subito.
    "This is the end, Clark... for both of us"

  3. #3
    Originariamente inviato da erredeco
    E' molto semplice: lo spostamento è dovuto al fatto che quando il sottomenù viene reso visibile, l'elemento che lo contiene ne assume le dimensioni. Se provi a mettere un border:1px solid red all'elemento[*] te ne accorgi subito.
    Ciao, si me ne ero accorto del motivo però come lo risolvo? come posso fare in modo che si sovrappone (uso questo termine per cercare di farmi capire)il sotto menù?
    Un uomo è vecchio solo quando i rimpianti, in lui, superano i sogni. A. Einstein

  4. #4
    "This is the end, Clark... for both of us"

  5. #5
    Originariamente inviato da erredeco
    prova a dare un'occhiata qui

    http://www.tjkdesign.com/articles/dropdown/3.asp
    Quindi devo per forza usare javascript per ottenere ciò che volgio! e se uno lo disabilita? non c'è soluzione utilizzando solo ed eslusivamente css?
    Un uomo è vecchio solo quando i rimpianti, in lui, superano i sogni. A. Einstein

  6. #6
    Quindi devo per forza usare javascript per ottenere ciò che volgio!
    Ehi, benvenuto nel fantastico mondo di MS Internet Explorer!

    e se uno lo disabilita?
    Bella domanda... devi prevedere per queste persone un "contenuto alternativo", magari nel footer

    non c'è soluzione utilizzando solo ed eslusivamente css?
    Dovresti guardare, se ben ricordo, quello che fa il signor Stu Nicholls (http://www.cssplay.co.uk/), che mi pare ottenga questa cosa a prezzo di "sporcare" parecchio il codice HTML
    "This is the end, Clark... for both of us"

  7. #7
    Grazie...ottimi spunti ci sono. Seguendo un suo esempio sono riuscito ad ottenere ciò ce volevo; gieniale la soluzione...semplicissima ma geniale ed efficace.
    Grazie mille
    Un uomo è vecchio solo quando i rimpianti, in lui, superano i sogni. A. Einstein

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.