CSS Menu déroulant Espacement

J'ai réussi à créer ce menu de navigation mais l'espacement sur les éléments de menu est désactivé. Aussi sur les listes secondaires, j'ai dû les élargir en raison d'un des éléments. Existe-t-il un moyen de faire varier la largeur en fonction de la longueur de l'élément le plus long.CSS Menu déroulant Espacement

<!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=utf-8" /> 
<title>Menu</title> 
<style type="text/css"> 

body { 
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif; 
} 

#nav, #nav ul { /* all lists */ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav a { 
    display: block; 
    width: 10em; 
} 

#nav li { /* all list items */ 
/* The sum of the next two lines creates the nav bar height*/ 
    padding-top:12px; 
    height: 28px; 
    float: left; 
    background: #f15a22; 
    width: 7em; /* width needed or else Opera goes nuts */ 
} 

#nav li ul { /* second-level lists */ 
    position: absolute; 
    background: #f15a22; 
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */ 
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
} 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
    left: auto; 
    top: 45px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/ 
} 

/*--- from Storm3y's code ---*/ 
#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    color: #f9f7ee; 
} 


</style> 

<script type="text/javascript"><!--//--><![CDATA[//><!-- 

sfHover = function() { 
    var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
    for (var i=0; i<sfEls.length; i++) { 
     sfEls[i].onmouseover=function() { 
      this.className+=" sfhover"; 
     } 
     sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

//--><!]]></script> 

</head> 
<body> 



<ul id="nav"> 
    <li><a href="#">About</a> 
    </li> 
    <li><a href="#">Teaching</a> 
     <ul> 
      <li><a href="#">Philosophy</a></li> 
      <li><a href="#">Piano</a></li> 
      <li><a href="#">Guitar</a></li> 
      <li><a href="#">Drums</a></li> 
      <li><a href="#">Theory</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Performing</a> 
     <ul> 
      <li><a href="#">Classical Piano</a></li> 
      <li><a href="#">Jazz Piano</a></li> 
      <li><a href="#">The Ginger Nuts</a></li> 
      <li><a href="#">The Legion Of Doom</a></li> 
     </ul>  
    </li>  
    <li><a href="#">Media</a> 
     <ul> 
      <li><a href="#">Photos</a></li> 
      <li><a href="#">Audio</a></li> 
      <li><a href="#">Video</a></li> 
      <li><a href="#">Articles</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Blog</a> 
    </li> 
    <li><a href="#">Links</a> 
    </li>   
    <li><a href="#">Contact</a> 
    </li> 

    <!-- etc. --> 

</ul> 


</body> 
</html>

Source

2011-09-16 Ged

Quand vous dites l'espacement est "off", ce * devrait-il être comme? Quelle devrait être la largeur totale du menu? – thirtydot

@thirtydot Je pense que l'affiche se réfère à ce phénomène: http://jsfiddle.net/uNNKd/1/ (survolez Performing) –

@Joseph: Mon commentaire concernait sa première phrase, qui semble parler de l'inégale espacement entre le texte (oubliez les listes déroulantes pour cette partie). – thirtydot

Cela le corrige. Je n'ai pas testé cross-browser. Avec cette méthode, également supprimer votre attribut supplémentaire sur la largeur ul

http://jsfiddle.net/uNNKd/

#nav li li { 
    clear: both; 
    width: auto; 
}

EDIT

#nav li li { 
    float: none; 
    width: auto; 
}

Ce sera également.

Source

2011-09-16 23:38:28

Voici une capture d'écran http://shiny.me/share/7t1nh4.png Problème 1: L'espacement entre chaque élément n'est pas pair Problème 2: Je souhaite que la largeur de chaque élément dans le menu déroulant diffère en fonction de la largeur du texte plutôt que d'une largeur fixe. – Ged

@Ged rats ... désolé ... Je dois y aller ... vous pouvez jeter un oeil à mes modifications au violon: http://jsfiddle.net/uNNKd/2/. ils sont désignés par "EDIT". –

Essayez comme ceci:

http://jsfiddle.net/andresilich/TMrpA/2/

:: EDIT ::

Voici le code CSS:

body { 
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif; 
} 

#nav, #nav ul { /* all lists */ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav a { 
    display: block; 
} 

#nav li { /* all list items */ 
/* The sum of the next two lines creates the nav bar height*/ 
    padding:0 20px; 
    height: 40px; 
    line-height:40px; 
    float: left; 
    background: #f15a22; 
    position:relative; 
} 

#nav li li { 
    float:none; 
} 

#nav li ul { /* second-level lists */ 
    position: absolute; 
    background: #f15a22; 
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */ 
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
} 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
    left: 0; 
    top: 40px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/ 
} 

/*--- from Storm3y's code ---*/ 
#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    color: #f9f7ee; 
}

Source

2011-09-16 23:54:44

Correction de l'alignement sur le menu de second niveau, voici la deuxième version: http://jsfiddle.net/andresilich/TMrpA/2/ ... maintenant tout est correctement aligné et espacé en fonction de la taille du li marque. –

Working Brilliant :) Merci – Ged

S'il vous plaît poster votre code ici avec le lien pour référence. –

CSS Menu déroulant Espacement

Répondre

Questions connexes