Création de la feuille de style

Si vous souhaitez que le menu aille dans un fichier HTML autonome, vous devez créer un espace entre les balises et l'emplacement du code CSS. Écrivez ce qui suit dans votre dossier.

L'espace entre ces deux étiquettes est votre feuille de style. Si vous utilisez un fichier CSS séparé, ajoutez les éléments suivants quelque part dans les balises "head":

Créez ensuite un fichier appelé "style.css", qui sera votre feuille de style. Conservez la feuille de style dans le même répertoire que le fichier HTML principal.

Création du menu

Vous devez créer une étiquette qui contient pour le menu pour aller à l'intérieur. Ajoutez les éléments suivants à votre page HTML à l'emplacement où vous souhaitez que le menu aille:

Ensuite, vous devez définir le diviseur de menu. Ajoutez le code suivant à votre feuille de style:

menu {

largeur: 200px; }

Ajoutez à cette entrée tout autre style CSS que vous souhaitez attribuer au diviseur; Par exemple, une couleur d'arrière-plan, des bordures ou une taille différente.

Balise HTML

Ajoutez le code pour le menu. Le menu utilisera une liste non ordonnée:

. Ajoutez le code suivant entre les étiquettes de votre menu.
• Point de menu 1
  • Elément 1 sous-menu
  • Elément 2 sous-menu

Notez que les étiquettes

des sous-menus sont entre les étiquettes
• et
pour "Elément 1 du menu". Cela indique au navigateur que le sous-menu est contenu sous cet élément de menu. Adapter le code ci-dessus pour représenter votre propre menu, en ajoutant vos propres URL et sous-menus supplémentaires si nécessaire

Style CSS

À ce stade, le menu apparaîtra mais le sous-menu sera toujours affiché. Il vous suffit d'utiliser l'attribut "display" pour masquer et afficher le sous-menu. Ajoutez les éléments suivants à votre feuille de style:

menu li {position: relative;}

menu ul ul {

position: absolue; en haut: 0; à gauche: 100%; largeur: 100px; } div # menu ul ul {display: aucun;} div # menu ul li: survol ul {display: block;}

Enregistrez tous les fichiers. Votre menu déroulant est prêt.

Références

• Tanfa.co.uk: tutoriel de menu contextuel CSS (tutoriel de menu déroulant CSS)

Plus d'articles

• Comment créer un menu déroulant horizontal en HTML
• Comment supprimer tous les styles CSS pour une DIV individuelle
• Comment réduire l'espace entre les lignes en HTML
• Comment insérer deux images horizontalement avec HTML
• Comment remplacer CSS dans les classes DIV
• Comment ancrer une DIV au bas d'une page
• Comment créer une ligne verticale qui sépare le texte HTML d'une image