ホームページ > 記事 > ウェブフロントエンド > 美しいドロップダウンナビゲーション効果を実現するCSSについて

美しいドロップダウンナビゲーション効果を実現するCSSについて

不言オリジナル: 2018-06-25 14:45:221530ブラウズ

この記事では、純粋な CSS を使用して美しいドロップダウンナビゲーション効果を実現するためのコードを主に紹介します。これは、シンプルな CSS スタイルの設定とマウスイベントへの応答によって実現されます。これは非常に実用的です。必要な場合は参照してください

この記事では、美しいドロップダウンナビゲーション効果コードを実現するための純粋な CSS の例について説明します。皆さんの参考に共有してください。詳細は次のとおりです:

これは、純粋な CSS で完成されたドロップダウンナビゲーションコードです。クラシックな青色のトーンで、非常に雰囲気があり、トップナビゲーションメニューとして政府や企業の Web サイトに適しています。大丈夫、困っている友達は行けるよ。

実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:

<!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>

以上がこの記事の全内容であり、皆様の学習に役立つことを願っています。内容については、PHP 中国語 Web サイトにご注意ください。

以上が美しいドロップダウンナビゲーション効果を実現するCSSについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS3を利用してシームレスなカルーセル機能を実現次の記事：CSS3を利用してシームレスなカルーセル機能を実現

続きを見る