Menu et sous-menu qui s'affiche à un endroit précis au survol

Bonjour,

Est-il possible d'avoir un menu avec des sous-menus, qui quand on survol le menu, le sous-menu s'affiche non pas en dessous, ni à coté, mais dans n'importe quel autre endroit de la page, par exemple en tout en haut à droite?

Avec une structure tel quel, je ne vois pas trop comment faire:

    <ul id="menu">
        <li><a href="#" title="Lien">Lien 1</a>
            <ul class="submneu">
                <li><a href="#" title="Lien">Lien 1.1</a></li>
                <li><a href="#" title="Lien">Lien 1.2</a></li>
                <li><a href="#" title="Lien">Lien 1.3</a></li>
            </ul>
        </li>
        <li><a href="#" title="Lien">Lien 2</a>
            <ul class="submneu">
                <li><a href="#" title="Lien">Lien 2.1</a></li>
                <li><a href="#" title="Lien">Lien 2.2</a></li>
                <li><a href="#" title="Lien">Lien 2.3</a></li>
            </ul>
        </li>
        <li><a href="#" title="Lien">Lien 3</a></li>
        <li><a href="#" title="Lien">Lien 4</a>
            <ul class="submneu">
                <li><a href="#" title="Lien">Lien 4.1</a></li>
                <li><a href="#" title="Lien">Lien 4.2</a></li>
                <li><a href="#" title="Lien">Lien 4.3</a></li>
            </ul>
        </li>
        <li><a href="#" title="Lien">Lien 5</a></li>
    </ul>

Une idée de comment faire?

Merci d'avance

Salut,

C'est possible, mais pour le coup pas très ergonomique. Si tu survols ton menu et que le sous menu apparait quelque part dans la page d'une part tu ne respectes pas la « loi de la proximité » qui est fondamentale selon moi. Mais surtout si tu cherches ensuite à accédez à ton sous menu, ton curseur quitteras le zone du hover du menu et fera disparaitre le sous menu. Donc inutilisable.

Edit : en js il y a moyen, je sais pas si ta question visais uniquement CSS
Modifié par Gili (01 May 2012 - 17:55)

Bonjour,

Merci pour votre réponse.

Oui je me suis un peu tromper, si on survol, ça affiche le sous-menu, et si on clique ça bloque le sous-menu sélectionner afin qu'on puisse aller cliquez sur le sous-menu.

Enfait j'aurais mon menu à gauche de ma page, et mon sous-menu aligner au milieu de ma page en horizontal.

Je peux donc avec la structure montré dans mon 1er post, réalisé ce genre chose?

Merci

Blogger a écrit :
Je peux donc avec la structure montré dans mon 1er post, réalisé ce genre chose?

Tout à fait, c'est d'ailleurs comme ça que l'ont fait.

Mais bon j'avoue que ça va être compliqué pour que l'utilisateur comprenne qu'il faut cliquer pour laisser afficher le contenu. Personnellement je n'ai jamais vu d'élément de menu qui effectue une action au hover et encore une action différente au clique (hormis changé de page bien sûr).

Mais pour ta question, oui la structure est bonne. Tu mettras ensuite tes .submenu en display:none et position: absolute/relative.