Maison > Article > interface Web > À propos de CSS pour obtenir un bel effet de navigation déroulante

À propos de CSS pour obtenir un bel effet de navigation déroulante

不言original: 2018-06-25 14:45:221527parcourir

Cet article vous présente principalement le code permettant de réaliser un bel effet de navigation déroulante en utilisant du CSS pur. Il réalise l'effet de navigation dans le menu déroulant grâce à un simple paramètre de style CSS et une réponse aux événements de la souris. Les amis qui en ont besoin peuvent s'y référer.

L'exemple de cet article décrit le code permettant d'obtenir un bel effet de navigation déroulante en utilisant du CSS pur. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code de navigation déroulant complété avec du CSS pur. Il a un ton bleu classique et est très atmosphérique. Il convient aux sites Web du gouvernement et des entreprises comme menu de navigation supérieur. La compatibilité du navigateur est OK. Si nécessaire, les amis peuvent le prendre.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD id=Head1>
<TITLE>纯CSS下拉菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
* {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL {
    LIST-STYLE-TYPE: none
}
LI {
    LIST-STYLE-TYPE: none
}
DL {
    LIST-STYLE-TYPE: none
}
DD {
    LIST-STYLE-TYPE: none
}
DT {
    LIST-STYLE-TYPE: none
}
A {
    COLOR: #414141; TEXT-DECORATION: none
}
IMG {
    DISPLAY: inline-block; FONT-SIZE: 12px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
A:hover {
    COLOR: #c51007
}
#dangqian A {
    COLOR: #c51007
}
.clear {
    CLEAR: both
}
.warper {
    MARGIN: 0px auto; WIDTH: 1000px
}
.menu {
    MARGIN-TOP: 3px; FONT-SIZE: 12px; BACKGROUND: url(images/menu_02.gif) repeat-x; LINE-HEIGHT: 28px; HEIGHT: 28px
}
.menu_01 {
    FLOAT: left
}
.menu_02 {
    FLOAT: right
}
.menu A {
    FONT-WEIGHT: bold; COLOR: #fff
}
.menu A:hover {
    COLOR: #b8def6
}
.menu DL {
    FLOAT: left
}
.menu DD {
    FLOAT: left; WIDTH: 132px; TEXT-ALIGN: center
}
.menu DT {
    PADDING-LEFT: 1px; BACKGROUND: url(images/menu_04.gif) no-repeat left top; FLOAT: left; WIDTH: 122px; POSITION: relative; HEIGHT: 28px; TEXT-ALIGN: center
}
.menuli_p {
    BACKGROUND: #0068aa; LEFT: 1px; PADDING-BOTTOM: 8px; WIDTH: 122px; POSITION: absolute; TOP: 28px
}
.menuli_p LI {
    BACKGROUND: url(images/menu_05.gif) no-repeat center bottom; PADDING-BOTTOM: 1px; LINE-HEIGHT: 24px; HEIGHT: 24px
}
.menu DT UL LI A {
    FONT-WEIGHT: normal
}
.menuli .menuli_p {
    DISPLAY: none
}
.menuli_hover .menuli_p {
    DISPLAY: block
}
</style>
<BODY onselectstart="return false">
<p class=warper>
<p class=menu><DL>
 <DD><A href="#" target=_self>首页</A></DD>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>关于家乡网</A>
 <UL class=menuli_p>
  <LI><A href="#">About</A></LI>
    <LI><A href="#">家乡网</A></LI>
    <LI><A href="#">中国网</A></LI>
    <LI><A href="#">大武汉</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>资讯动态</A>
 <UL class=menuli_p>
  <LI><A href="#">省内</A></LI>
    <LI><A href="#">省外</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A 
 href="#" target=_self>组织机构</A>
 <UL class=menuli_p>
      <LI><A href="#">省委</A></LI>
    <LI><A href="#">政府</A></LI>
    <LI><A href="#">政协</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A 
 href="#" target=_self>主营业务</A>
 <UL class=menuli_p>
  <LI><A href="#">淘宝</A></LI>
    <LI><A href="#">手机</A></LI>
    <LI><A href="#">相机</A></LI>
    <LI><A href="#">电脑</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>品牌战略</A>
 <UL class=menuli_p>
  <LI><A href="#">一杯水</A></LI>
    <LI><A href="#">城市生活</A></LI>
    <LI><A href="#">家乡网</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A href="#" 
 target=_self>人才招聘</A>
 <UL class=menuli_p>
  <LI><A href="#">我的家</A></LI>
    <LI><A href="#">家乡网</A></LI>
    </UL></DT>
 <DT class=menuli onMouseOver="this.className=&#39;menuli_hover&#39;" 
 onmouseout="this.className=&#39;menuli&#39;"><A 
 href="#" target=_self>联系我们</A>
 <UL class=menuli_p>
  <LI><A href="#">联系我</A></LI>
  <LI><A href="#">联系她</A></LI>
    <LI><A href="#">我的家</A></LI>
  </UL></DT></DL></p>
</BODY>
</HTML>

Ce qui précède est Tout le contenu de cet article, j'espère qu'il sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

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 précédent：Utilisez CSS3 pour obtenir une fonction de carrousel transparenteArticle suivant：Utilisez CSS3 pour obtenir une fonction de carrousel transparente

Articles Liés

Voir plus