欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么用CSS實現(xiàn)漂亮的下拉導航效果-創(chuàng)新互聯(lián)

本篇內容介紹了“怎么用CSS實現(xiàn)漂亮的下拉導航效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

成都創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為渝中企業(yè)提供專業(yè)的成都網站設計、網站制作、外貿營銷網站建設，渝中網站改版等技術服務。擁有十余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

這是一款純CSS完成的下拉導航代碼，藍色經典色調，非常大氣，適合政府和企業(yè)類網站作為頂部的導航菜單，瀏覽器兼容性完成OK，有需要的朋友可以拿去。


運行效果截圖如下：

怎么用CSS實現(xiàn)漂亮的下拉導航效果

在線演示地址如下：

http://demo.jb51.net/js/2015/css-xlcd-nav-menu-codes/

具體代碼如下：

代碼如下:

<!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_div {
   BACKGROUND: #0068aa; LEFT: 1px; PADDING-BOTTOM: 8px; WIDTH: 122px; POSITION: absolute; TOP: 28px
}
.menuli_div 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_div {
   DISPLAY: none
}
.menuli_hover .menuli_div {
   DISPLAY: block
}
</style>
<BODY onselectstart="return false">
<DIV class=warper>
<DIV class=menu><DL>
<DD><A href="#" target=_self>首頁</A></DD>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A href="#"
target=_self>關于家鄉(xiāng)網</A>
<UL class=menuli_div>
 <LI><A href="#">About</A></LI>
   <LI><A href="#">家鄉(xiāng)網</A></LI>
   <LI><A href="#">中國網</A></LI>
   <LI><A href="#">大武漢</A></LI>
   </UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A href="#"
target=_self>資訊動態(tài)</A>
<UL class=menuli_div>
 <LI><A href="#">省內</A></LI>
   <LI><A href="#">省外</A></LI>
   </UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
href="#" target=_self>組織機構</A>
<UL class=menuli_div>
     <LI><A href="#">省委</A></LI>
   <LI><A href="#">政府</A></LI>
   <LI><A href="#">政協(xié)</A></LI>
   </UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
href="#" target=_self>主營業(yè)務</A>
<UL class=menuli_div>
 <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='menuli_hover'"
onmouseout="this.className='menuli'"><A href="#"
target=_self>品牌戰(zhàn)略</A>
<UL class=menuli_div>
 <LI><A href="#">一杯水</A></LI>
   <LI><A href="#">城市生活</A></LI>
   <LI><A href="#">家鄉(xiāng)網</A></LI>
   </UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A href="#"
target=_self>人才招聘</A>
<UL class=menuli_div>
 <LI><A href="#">我的家</A></LI>
   <LI><A href="#">家鄉(xiāng)網</A></LI>
   </UL></DT>
<DT class=menuli onMouseOver="this.className='menuli_hover'"
onmouseout="this.className='menuli'"><A
href="#" target=_self>聯(lián)系我們</A>
<UL class=menuli_div>
 <LI><A href="#">聯(lián)系我</A></LI>
 <LI><A href="#">聯(lián)系她</A></LI>
   <LI><A href="#">我的家</A></LI>
 </UL></DT></DL></DIV>
</BODY>
</HTML>

“怎么用CSS實現(xiàn)漂亮的下拉導航效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！

名稱欄目：怎么用CSS實現(xiàn)漂亮的下拉導航效果-創(chuàng)新互聯(lián)
轉載來于：http://www.chinadenli.net/article6/dccjog.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網頁設計公司、網站設計、企業(yè)建站、品牌網站設計、微信公眾號、營銷型網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)