Heim > Artikel > Web-Frontend > Über CSS, um einen schönen Dropdown-Navigationseffekt zu erzielen

Über CSS, um einen schönen Dropdown-Navigationseffekt zu erzielen

不言Original: 2018-06-25 14:45:221482Durchsuche

Dieser Artikel führt Sie hauptsächlich in den Code ein, mit dem Sie mithilfe von reinem CSS einen schönen Drop-Down-Navigationseffekt realisieren können. Er realisiert den Drop-Down-Menü-Navigationseffekt durch einfache CSS-Stileinstellungen und ist von großem praktischem Wert. Freunde, die es brauchen, können darauf verweisen.

Das Beispiel in diesem Artikel beschreibt den Code, um mit reinem CSS einen schönen Dropdown-Navigationseffekt zu erzielen. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Dies ist ein mit reinem CSS vervollständigter Dropdown-Navigationscode. Er hat einen klassischen Blauton und ist sehr stimmungsvoll. Er eignet sich für Regierungs- und Unternehmenswebsites als oberes Navigationsmenü. Die Browserkompatibilität ist in Ordnung. Bei Bedarf können Freunde es übernehmen.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

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

Das Obige ist das Ganze Ich hoffe, dass der Inhalt dieses Artikels für das Lernen aller nützlich sein wird. Wenn Sie Hilfe benötigen, schauen Sie sich bitte die chinesische PHP-Website an, um weitere verwandte Inhalte zu erhalten!

Das obige ist der detaillierte Inhalt vonÜber CSS, um einen schönen Dropdown-Navigationseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie CSS3, um eine nahtlose Karussellfunktion zu erreichenNächster Artikel：Verwenden Sie CSS3, um eine nahtlose Karussellfunktion zu erreichen

In Verbindung stehende Artikel

Mehr sehen