Comment créer un CSS (à la verticale) menu déroulant?

Bon après-midi,

Ma tâche actuelle est de créer plusieurs feuilles de style pour un site web. L'un des sites les styles m'oblige à créer un menu déroulant, cependant je ne suis pas autorisé à modifier le code HTML, donc, fondamentalement, je suis invité à créer une liste déroulante comme menu avec CSS.

Voici le code HTML que j'ai à l'écran sous la forme d'un menu déroulant:

<div id="global-nav">
<ul>
<li><a href="#products">Products</a>
  <ul>
  <li><a href="#widgets">Widgets</a></li>
  <li><a href="#sites">Sites</a></li>
  <li><a href="#gadgets">Gadgets</a></li>
  </ul>
</li>
</ul>

Y sont toutefois différentes exigences:
Il ne devrait pas y avoir de points ou de cercles précédant chaque élément de la liste.

Je me demande s'il est possible d'accomplir cette tâche avec CSS ou pas.
Est-il possible que je peux le faire avec du CSS?

CSS ne peut pas faire ce que vous avez besoin. Cela ressemble à un travail pour JQuery.
Oui c'est possible. Voir cette Liste, en dehors de l'article pour les détails de mise en œuvre.
C'est tout à fait possible avec les CSS. Il devrait y avoir de nombreux tutoriels là couvrant exacte de ce sujet.
jQuery! jQuery! jQuery! "Vote pour jQuery!" 🙂
Ce serait une parodie de tirer parti d'une 30k bibliothèque, où les 10 lignes de CSS fonctionne parfaitement. Je ne rêve pas de l'utilisation de jQuery pour quelque chose d'aussi simple.

OriginalL'auteur beta | 2011-11-15

  1. 1

    Juste un peu d'une version améliorée de la solution ci-dessus.

    <style type="text/css">
#global-nav {
width: 121px;
float: left;
background: #e8eef4;
}
#global-subnav {
width: 121px;
background: #09C;
}
#global-nav a {
color: #034af3;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;   
text-indent: 10px;               
text-decoration:none;
font-weight: bold;
width: 100%;
}
#global-nav ul{
background: yellow;
padding: 0;
margin: 0;
}
#global-subnav ul{
background: orangered;
position: relative;
top: -10px;
left: 40px;
}
#global-nav li{
list-style: none;   
border-bottom: #5C87B2 solid;
border-width: 3px;
}
#global-nav ul ul li{
display:none;
}
#global-nav li:hover {
background: #fff;
}
#global-nav li:hover ul li{
display:block;
}
</style>
<div id="global-nav">
<ul>
<li><a href="#One">One</a>
<div id="global-subnav">
<ul>
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
</ul>
</div>
</li>
<li><a href="#Two">Two</a>
<div id="global-subnav">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</ul>
</div>
</li>
</ul>
</div>
    Merci pour l'ajout de cette.

    OriginalL'auteur Mario

  2. 1

    Le code est erroné sur le dernier post.

    Vous ne pouvez pas avoir plus de 1 ID avec le même nom dans un document, donc si vous utilisez le code ci-dessus, vous devez changer les

    ID="global-subnav" à class="global-subnav"

    et ensuite modifier le CSS de

    #global-subnav à .global-subnav

    merci pour votre contribution

    OriginalL'auteur user2401766