Comment utiliser HTML+CSS pour afficher la barre de menu secondaire en faisant glisser la souris dessus-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

Comment utiliser HTML+CSS pour afficher la barre de menu secondaire en faisant glisser la souris dessus

php中世界最好的语言

Jan 16, 2018 am 09:53 AM

csshtml+css

Cette fois, je vais vous montrer comment utiliser HTML+CSS pour afficher la barre de menu secondaire en faisant glisser la souris, et HTML+CSS pour afficher la barre de menu secondaire en faisant glisser la souris NotesQue sont. ils ? Voici des cas réels.

Cet article présente un exemple d'utilisation de HTML+CSS pour implémenter une barre de menu secondaire traversée par la souris. J'aimerais le partager avec vous. Les détails sont les suivants :

<html>
<head>
    <title>二级菜单测试</title>
    <meta charset="utf-8">
    <style type="text/css">
    /*为了使菜单居中*/
    body {
        padding-top:100px;
        text-align:center;
    }
    /* -------------菜单css代码----------begin---------- */
    .menuDiv {
        border: 2px solid #aac;
        overflow: hidden;
        display:inline-block;
    }  
    /* 去掉a标签的下划线 */
    .menuDiv a {
        text-decoration: none;
    }
    /* 设置ul和li的样式 */
    .menuDiv ul , .menuDiv li {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
    }  
    /* 设置二级菜单绝对定位，并隐藏 */
    .menuDiv > ul > li > ul {
        position: absolute;
        display: none;
    }
    /* 设置二级菜单的li的样式 */
    .menuDiv > ul > li > ul > li {
        float: none;
    }
    /* 鼠标放在一级菜单上，显示二级菜单 */
    .menuDiv > ul > li:hover ul {
        display: block;
    }
    /* 一级菜单 */
    .menuDiv > ul > li > a {
        width: 120px;
        line-height: 40px;
        color: black;
        background-color: #cfe;
        text-align: center;
        border-left: 1px solid #bbf;
        display: block;
    }
    /* 在一级菜单中，第一个不设置左边框 */
    .menuDiv > ul > li:first-child > a {
        border-left: none;
    }
    /* 在一级菜单中，鼠标放上去的样式 */
    .menuDiv > ul > li > a:hover {
        color: #f0f;
        background-color: #bcf;
    }
    /* 二级菜单 */
    .menuDiv > ul > li > ul > li > a {
        width: 120px;
        line-height: 36px;
        color: #456;
        background-color: #eff;
        text-align: center;
        border: 1px solid #ccc;
        border-top: none;
        display: block;
    }
    /* 在二级菜单中，第一个设置顶边框 */
    .menuDiv > ul > li > ul > li:first-child > a {
        border-top: 1px solid #ccc;
    }
     
    /* 在二级菜单中，鼠标放上去的样式 */
    .menuDiv > ul > li > ul > li > a:hover {
        color: #a4f;
        background-color: #cdf;
    }
    /* -------------菜单css代码----------end---------- */
     
    </style>
</head>
<body>
 
    <!-- -------菜单html代码---------begin------- -->
    <div class="menuDiv">
        <ul>
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单二</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单三</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单四</a>
            </li>
            <li>
                <a href="#">菜单五</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- -------菜单html代码---------end------- -->
     
</body>
</html>

Je pense que vous l'avez maîtrisé après avoir lu ces cas. Méthode, pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment résoudre les lacunes dans les images dans H5

À quels aspects faut-il prêter attention dans la structure des pages de html5

Comment créer une fonction de vérification de calendrier dans H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

HTML, CSS et JavaScript: exemples et applications pratiquesMay 09, 2025 am 12:01 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML est utilisé pour créer une structure de page Web; 2. CSS est utilisé pour embellir l'apparence des pages Web; 3. JavaScript est utilisé pour obtenir une interaction dynamique. Grâce à des balises, des styles et des scripts, ces trois créent ensemble les fonctions principales des pages Web modernes.

Comment définissez-vous l'attribut Lang sur la balise ? Pourquoi est-ce important?May 08, 2025 am 12:03 AM

La définition des attributs Lang d'une balise est une étape clé dans l'optimisation de l'accessibilité Web et du référencement. 1) Définissez l'attribut Lang dans la balise, comme. 2) Dans le contenu multilingue, définissez les attributs Lang pour différentes parties de langue, telles que. 3) Utilisez des codes linguistiques conformes aux normes ISO639-1, telles que "EN", "FR", "ZH", etc. La définition correcte de l'attribut Lang peut améliorer l'accessibilité des pages Web et des classements de moteur de recherche.

Quel est le but des attributs HTML?May 07, 2025 am 12:01 AM

HtmlattributesAsAntinelEntialFormenhancingWelements's-ctionality et appareil.EyyAddInformationTodeFineBehavior, Apparence et Interaction, faisant des websites interactifs, réactifs, et visuellement.

Comment créez-vous une liste dans HTML?May 06, 2025 am 12:01 AM

TOCRÉATEALISTINHTML, USEFORDORDEDRILST ANDFORODEREDLISTS: 1) ForunDorDedlists, webrotemsinandUseForEachItem, Renderingasabulletedlist.2) FororderDlists, useAndFornumberredlists, personnalisable withthepeTypeTrributeforDiferentNumberStyles.

HTML en action: Exemples de structure de site WebMay 05, 2025 am 12:03 AM

HTML est utilisé pour créer des sites Web avec une structure claire. 1) Utilisez des balises telles que et définissez la structure du site Web. 2) Les exemples montrent la structure des blogs et des sites Web de commerce électronique. 3) Évitez les erreurs courantes telles que la nidification incorrecte des étiquettes. 4) Optimiser les performances en réduisant les demandes HTTP et en utilisant des balises sémantiques.

Comment insérer une image dans une page HTML?May 04, 2025 am 12:02 AM

ToinsertanimageIntoanhtmlpage, usethetagwithsrcandalttributes.1) usealttextforaccessibility and

Objectif de HTML: permettant aux navigateurs Web d'afficher du contenuMay 03, 2025 am 12:03 AM

L'objectif principal de HTML est de permettre au navigateur de comprendre et d'afficher le contenu Web. 1. HTML définit la structure et le contenu de la page Web via des balises, telles que, à, etc. 2. HTML5 améliore la prise en charge multimédia et les introductions et les balises. 3.HTML fournit des éléments de formulaire pour prendre en charge l'interaction utilisateur. 4. Optimisation du code HTML peut améliorer les performances de la page Web, telles que la réduction des demandes HTTP et la compression de HTML.

Pourquoi les balises HTML sont-elles importantes pour le développement Web?May 02, 2025 am 12:03 AM

HtmltagsaressentialforwebDevelopmentaSheystructureAnDenHanceWebpages.1) TheyDefiLlayout, Semantics et Interactivité.2) SemanctagSimproveaccessibilistibilitySeo.3) correct usUsoftagscanoptimizeperformanceAndensurecross-browercompatibilité.

See all articles