[Résolu]Sous menu qui pousse mon menu

Bonjour à tous,

Actuellement étudiante en Infographie multimédia, je suis, dans le cadre d'un stage, chargée de réaliser un site pour une société de chaussures. Je code depuis peu, et je rencontre donc souvent quelques soucis

Aujourd'hui, j'en ai un de taille avec mon menu déroulant...
J'ai crée mon menu principal à base de nav>ul>li>a, puis dans l'une des li, un sous menu ul>li>a.
Jusque là, tout est normal... Seulement, mon nouveau sous-menu pousse les autres liens au niveau du dernier lien de mon sous-menu !!
Je précise que je n'en suis qu'à la première étape, et que je ne me suis pas encore attaqué au display:none ou au li:hover.


Voici la chose en images :

http://img4.hostingpics.net/thumbs/mini_791399problememenu.jpg

Et voici le code qui va bien avec :

HTML :

<nav> <!--NAVIGATION-->
			<ul>
            	<li><a href="index.html">Accueil</a></li>
                <li><a href="collections.html">Collections</a>
                    <ul>
                                <li><a href="bottes.html">Bottes</a></li>
                                <li><a href="bottines.html">Bottines</a></li>
                                <li><a href="escarpins.html">Escarpins</a></li>
                                <li><a href="ballerines.html">Ballerines</a></li>
                                <li><a href="sandales.html">Sandales</a></li>
                                <li><a href="sacs.html"></a></li>                        
                            </ul>              
                </li>
                <li><a href="#">Boutiques</a></li>
                <li><a href="newsletter.html">Newsletter</a>
                <li><a href="contact.html">Contact</a></li>           
			</ul>
		</nav><!--FIN DE LA NAVIGATION-->

CSS :

/* NAVIGATION */

nav {
    display: inline-block;
    height: 8%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background-color: #d2ad88;
    -moz-box-shadow: inset 0px -10px 15px -5px #c4a280;
    -webkit-box-shadow: inset 0px -10px 15px -5px #c4a280;
    -o-box-shadow: inset 0px -10px 15px -5px #c4a280;
    box-shadow: inset 0px -10px 15px -5px #c4a280;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#c4a280, Direction=90, Strength=15);
    position:absolute;
	z-index:10;
}

     nav ul {
         width:85%;
         height: 100%;
         text-align: center;
         margin: 0 auto;
         }

        nav ul li {
            display: inline-block;
            width: 18%;
            height: 100%;            
            text-align: center;
            
        }
            nav ul li a {
                display: block;
                height: 100%;
                line-height: 60px;
                text-decoration: none;
                font-family: 'farrayregular';
                color:#FFF;
                font-size: 12px;
                letter-spacing: 2px;               
            }

    nav ul li ul {
        width:18%;
        padding: 0; margin: 0 auto;
    }

    nav ul li ul li {
        display: block;
        width: 100%;        
    }

J'avais pourtant déjà réalisé un menu déroulant, mais je n'avais encore jamais eu ce problème.
J'avoue que je ne dois pas avoir vraiment les yeux en face des trous vu le temps que je passe (gratuitement et gracieusement) sur ce site...

Merci d'avance à tous pour m'avoir lue et/ou répondu et/ou aidée !!
Modifié par Dakota (07 Jul 2014 - 16:44)

Bonjour,

Deux liens qui devraient vous permettre d'y voir plus clair :
Guide de survie du positionnement CSS
Comment fonctionne la propriété CSS z-index ?

Je continue de penser que ce type d'interaction se fait avec JavaScript (si, le menu déroulant est absolument nécessaire) mais c'est un autre débat

Il existe pléthores de tutoriels sur les menus déroulants sur la toile, n'hésitez pas à vous en inspirer, et à en étudier le code.

Bon courage

Bonjour,

Je pencherais pour un vertical-align:top; sur les li en display:inline-block; de ton premier menu

nav ul li {
            display: inline-block;
            vertical-align:top;
            width: 18%;
            height: 100%;            
            text-align: center;
            
        }

[EDIT] Et sur un second niveau de menu en position:absolute; pour le pas qu'il influe sur la taille de son parent (le menu)
Modifié par _laurent (30 Jun 2014 - 12:45)

Merci pour vos réponses extrêmement rapides !
J'ai effectivement fini par penser à mettre mon ul en absolute, et ça fonctionne
Puis-je me permettre de ne pas mettre ce sujet en [Résolu] dans le cas où je rencontrerais d'autres soucis avec mon menu ?

Dakota a écrit :
Merci pour vos réponses extrêmement rapides !
J'ai effectivement fini par penser à mettre mon ul en absolute, et ça fonctionne

De rien

Dakota a écrit :
Puis-je me permettre de ne pas mettre ce sujet en [Résolu] dans le cas où je rencontrerais d'autres soucis avec mon menu ?

Faites donc