简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

css导航_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 12:34:41
original
1143 Les gens l'ont consulté

   

   

body {         width:960px;        margin: 40px auto;         }

        #menu {           height:40px;           width:100%;           background:#1b1717;           list-style:none;           border-radius:5px;         }

        #menu li {              float:left;             list-style:none;             width:130px;             }

       #menu a {  top:10px;

             padding:10px 40px 10px 40px;   

            position:relative; 

            text-transform: uppercase; 

            font: bold 12px/25px Arial, Helvetica;   

              }

            #menu ul {   display:none;    }            

         #menu ul li{  background:#2b2b33;

                position:relative; 

               width:130px; 

               height:40px;  

              left:-40px;   

               top:15px; 

               border-bottom:1px solid;     

            border-bottom-color:white;  

            }

         #menu li:hover > ul    {   display: block;   }

            #menu ul ul li {   position:relative;  top:-25px;   left:90px;   background:#2937a7;   }                      

   /*第一个小三角代码*/         

  #menu ul li:first-child > a:after{  content: '';    display: inline-block; border-left: 6px solid transparent;    border-right: 6px solid transparent;             border-bottom: 6px solid #CCC;   position: absolute;  top: -10px;   left: 60px;             }

           /*第二个小三角代码*/     

#menu ul ul li:first-child a:after{ 

　　　　left: -8px; 

　　　　top: 12px;  

　　　　border-left: 0px; 

　　　　border-bottom: 5px solid transparent; 

　　　　border-top: 5px solid transparent;  

　　　　border-right: 8px solid #444; }

           

   

  

Étiquettes associées：
css导航
source：php.cn
Article précédent：css3圆角边框，边框阴影_html/css_WEB-ITnose Article suivant：25款专业的 WordPress 电子商务网站主题_html/css_WEB-ITnose
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1335
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Pourquoi ma balise hr est-elle translucide lorsqu'elle est définie sur une couleur blanche unie ? J'ai un HTML (avec bootstrap) et un CSS, dans mon HTML j'ai une balise <hr> qui a un...
Depuis 2024-04-06 16:13:26
0
1
500
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Bordure inférieure CSS sur la barre de navigation J'ai une barre de navigation et j'ai ajouté une ligne rouge en bas lorsqu'un élément de la...
Depuis 2024-04-06 15:04:41
0
2
347
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！