Doutes troublant le rêve avec mon menu déroulant

Question

J'ai essayé de faire un menu déroulant, mais j'ai beaucoup de questions et il semble que je fasse tout de travers. Voici quelques-unes des principales questions qui perturbent mes rêves :

• Dois-je utiliser list-style:none; sur les UL ou les LI (ou les deux) ?
• Est-il préférable de mettre background-color et border sur As ou LIs ?
• Les LI qui se trouvent à l'intérieur de l'UL flottante absolue doivent-ils avoir float:left; o position:relative; ?

Le code que j'utilise semble fonctionner, mais ma plus grande crainte est d'écrire des lignes inutiles ou même de mal coder.

Merci de m'aider.

Le CSS que j'utilise :

*{
padding:0;
margin:0;
}

#menu{
margin:0 auto;
width:800px;
background:#999;
border:1px solid #777;
}

#menu ul{
list-style:none;
border-right:1px solid #aeaeae;
/*Not sure about this V*/
position:relative;
float:left;
}

#menu li ul{
font-weight:normal;
display:none;
position:absolute;
border:1px solid #777;
width:200px;
/*Not sure about this V*/
float:none;
margin-left:-2px;
}

#menu li{
display:block;
position:relative;
float:left;
background:#999;
border-right:1px solid #777;
border-left:1px solid #aeaeae;
}

#menu li li{
float:none;
background:#eaeaea;
border:0;
border-top:1px solid #666;
}

#menu li:hover{
background:#a6a6a6;
}

#menu li li:hover{
background:#f5f5f5;
}

#menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 15px;
}

#menu li ul a{
color:#333;
}

#menu a:hover{
color:#fff;
}

#menu li ul a:hover{
color:red;
}

#menu li li:first-child{
border-top:0;
}

.clear{
clear:both;
font-size:0;
line-height:0;
}

La structure HTML est la suivante :

<div id="menu">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Products</a>
        <li><a href="">Drop Down</a>
            <ul>
            <li><a href="">DD Item</a></li>
            <li><a href="">Another One</a></li>
            <li><a href="">Last DD Item</a></li>
            </ul><div class="clear"></div>
        </li>
    </ul><div class="clear"></div>
</div>

J'utilise JQuery pour afficher/masquer le menu :

$('#menu ul li').hover(function(){$('ul',this).slideDown(100);},
function(){$('ul',this).slideUp(100);});

Le code que j'ai utilisé est fortement modifié, mais provient de aquí

Answer 1

Vos rêves sont probablement en sécurité. En tout cas, votre CSS a l'air assez bon dans l'ensemble. Vous pourriez envisager d'utiliser Twitter Bootstrap pour certaines de vos activités (les superbes menus déroulants), mais vous pouvez tout à fait vous débrouiller tout seul.

Pour répondre à vos questions :

---

Dois-je utiliser list-style:none; sur les UL ou les LI (ou les deux) ?

Juste sur ul 's.

---

Est-il préférable de mettre background-color et border sur As ou LIs ?

Les mettre sur le li éléments.

---

Les LI qui se trouvent à l'intérieur de l'UL flottante absolue doivent-ils avoir float:left; ou position:relative; ?

Ils accomplissent des choses totalement différentes. Le flottement à gauche devrait suffire, mais vous pouvez vouloir faire les deux.

---

Vous devriez également remanier votre code jQuery, même s'il fonctionne :

$("#menu ul li").hover(
  function () {
    $(this).children("ul").slideDown(100);
  },
  function () {
    $(this).children("ul").slideUp(100);
  }
);