CSS dropdown nav causant du contenu html à déplacer

ma première question, j'espère que c'est jusqu'à zéro, devrait être simple à résoudre pour quelqu'un qui connaît bien l'art de la css...

Le problème de la gi est que la liste des sections de mon css de navigation sont à l'origine du contenu qui est en-dessous de déplacement vers la droite. J'ai trouvé des similaires-ish questions posté, mais j'ai essayé toutes les solutions apportées et rien ne semble le faire fonctionner.....

Le plus proche que j'ai réussi à obtenir est d'ajouter position:absolute; à la #nav li:hover ul tag, et de ce fait arrêter le contenu de se déplacer, mais crée un nouveau problème, la liste déroulante sous-menu n'est visible que lorsque la souris est sur le haut niveau de l'élément de menu, et en essayant de déplacer la souris vers le bas le sous-menu des causes qu'il disparaisse... un autre problème que je viens de trouver tout aussi frustrant pour résoudre...

html pour la navigation de série listes imbriquées:

<div id="navigation_panel" class="orange_grad">
<!-- navigation-->
<ul id="nav">
<li><a href="#">about us</a>
<ul>
<li class="orange_grad"><a href="1">staff</a></li>
<li class="orange_grad"><a href="2">venue</a></li>
<li class="orange_grad"><a href="2">history</a></li>
<li class="orange_grad"><a href="2">community theatre</a></li>
<li class="orange_grad"><a href="2">rep theatre</a></li>
<li class="orange_grad"><a href="2">theatre school</a></li>
<li class="orange_grad"><a href="2">official partners</a></li>
</ul>
</li>
<li><a href="#">join us</a>
<ul>
<li class="orange_grad"><a href="1">friends membership</a></li>
<li class="orange_grad"><a href="2">wine club</a></li>
</ul>
</li>
<li><a href="#">hire</a>
<ul>
<li class="orange_grad"><a href="1">business</a></li>
<li class="orange_grad"><a href="2">rehersal space</a></li>
<li class="orange_grad"><a href="2">community groups</a></li>
<li class="orange_grad"><a href="2">theatre productions</a></li>
<li class="orange_grad"><a href="2">memorable occasions</a></li>
</ul>
</li>
<li><a href="#">contact</a>
<ul>
<li class="orange_grad"><a href="1">list of contacts</a></li>
<li class="orange_grad"><a href="2">contact us now</a></li>
</ul>
</li>
<li class=" last"><a href="#">support</a>
<ul>
<li class="orange_grad last"><a href="1">donations + requests</a></li>
<li class="orange_grad last"><a href="2">past sponsors</a></li>
<li class="orange_grad last"><a href="2">thanks</a></li>
<li class="orange_grad last"><a href="2">volunteers</a></li>
<li class="orange_grad last"><a href="2">set up a community event</a></li>
</ul>
</li>
</ul>

et le css est comme suit:

#navigation_panel {border-radius: 18px 18px 0 0/18px 18px 0 0; width: 900px; height:50px;}
#nav { margin:0; padding: 0; list-style:none;}
#nav a{ color:black; font-size: 20px; text-decoration:none; min-height:50px; width:95px;}
#nav li {text-align:center; float:left; padding:14px 8px ; cursor:pointer; width:95px;}
#nav li.last{width:99px;}
#nav li ul {margin-top:14px; margin-left:-8px; padding:0; display: none; list-style:none;}
#nav li ul li{ border:1px solid black; width:95px; padding:6px 8px;}
#nav li ul li a{/*font-family:arial;*/font-size:14px;}
#nav li:hover{ text-decoration:underline; }
#nav li:hover ul{display: block;}
#nav li:hover ul li {clear: left;}

J'ai essayé de trouver des solutions par la voie normale (recherche sur google, DONC, etc) ainsi que de jouer avec les différentes configurations de positionnement, mais je n'arrive pas à résoudre ce...
Merci pour toute aide à l'avance, ce problème a été me rend fou toute la journée!

OriginalL'auteur mr_lewjam | 2012-11-03

20

Mis à jour

Finalement eu la chance de prendre un nouveau regard sur cette. Tous vous avez besoin est d'ajouter les éléments suivants à #nav li ul:
```
position: absolute;
z-index: 100;
```
Travaille dans IE8/9, FF et Chrome, bien que le positionnement du sous-menu est désactivé dans IE7, avec ou sans mon changement. Pour corriger que je recommande IE7 CSS spécifique à travers quelle que soit la méthode que vous préférez.

ah bon travail, ce n'résoudre le problème de l'évolution du contenu, cependant cela provoque un nouveau problème de lorsque la souris se déplace de vol stationnaire au-dessus du niveau de l'élément de menu dans le sous-menu, le sous-menu disparaît...ce qui est mentionné dans la question
Doh! J'ai manqué. Je vais regarder de plus un peu plus et voir si je peux localiser le problème. Êtes-vous d'avoir des problèmes dans un navigateur spécifique? J'ai mis à jour le CSS et en Chrome, FF et IE7-9, je suis capable de planer sur le sous-menu: jsfiddle.net/H3tRM/1
im test dans google chrome, et le jsfiddle que vous avez fournies en réalité semble bien fonctionner, mais quand je l'applique à mon site, le problème de la disparition du sous-menu semble persister..
Mise à jour de la réponse pour vous.
merci beaucoup!

OriginalL'auteur Mathachew

Vous pouvez essayer de faire quelque chose avec z-index. Z-index est de "faire" des couches, alors peut-être vous pouvez configurer votre sous-navigation à z-index: 2.

Mais, dans de telles situations de prise de menu déroulant, je recommande l'utilisation de jQuery. Une fois, j'ai essayé de faire menu déroulant avec pur CSS et HTML, mais bientôt découvert que jQuery est une façon, de mieux.

Exemple d'un menu déroulant à l'aide de jQuery: jsfiddle

jQuery:

$(".subnav").hide();
$(".navigation li a, .subnav").hover(function(){
$(this).parent().find(".subnav").stop().fadeIn(400);
}, function(){
$(this).parent().find(".subnav").stop().fadeOut(400);
});

HTML:

<div>
<ul class="navigation">
<li><a>Example 01</a></li>
<li><a>Example 02</a>
<ul class="subnav">
<li><a>Lorem</a></li>
<li><a>Impsum</a></li>
<li><a>Dolor</a></li>
<li><a>Sit</a></li>
<li><a>Amet</a></li>
</ul>    
</li>
<li><a>Example 03</a></li>
<li><a>Example 04</a></li>
</ul>                                        
</div>

CSS:

.navigation li{
display: inline;
font-family: Arial, sans-serif;
font-size: 12px;
padding: 0 10px;
position: relative;
}
.navigation li a:hover{
color: #999;
}
.subnav li{
display: list-item;
padding: 5px 10px;
}
.subnav{
border: 1px solid #000;
width: 70px;
position: absolute;
z-index: 2;
margin-left: 10px;
}

merci pour la suggestion, je vais l'essayer ce soir et vous laisser savoir comment je reçois sur
merci quand même mais je suis gona utiliser le pur css réponse ci-dessus, car il est plus facile pour moi de mettre en œuvre à ce moment, mais si j'ai même construire une autre liste déroulante à partir de zéro malade definiately utiliser jquery...
Heureux de l'entendre. 🙂

OriginalL'auteur Doozerman

Vous devez vous connecter pour publier un commentaire.