ホームページ >ウェブフロントエンド >htmlチュートリアル >cssナビゲーション_html/css_WEB-ITnose

cssナビゲーション_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:34:411186ブラウズ

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menuText.aspx.cs" Inherits="WebApplication1.menuText" %>

   

       

body { width:960px;        マージン: 40px 自動;         }

#menu { 高さ:40px;           幅:100%;           背景:#1b1717;           リストスタイル:なし;           境界半径:5px;         }

#menu li { float:left;             リストスタイル:なし;             幅:130ピクセル;             }

#menu a { top:10px;

padding:10px 40px 10px 40px;   

位置:相対。 

text-transform: 大文字。 

フォント: 太字 12px/25px Arial、Helvetica;   

}

#menu ul { 表示:なし;    }

#menu ul li{ 背景:#2b2b33;

position:relative; 

幅:130px; 

高さ:40px;  

左:-40px;   

トップ:15ピクセル; 

border-bottom:1px ソリッド;     

border-bottom-color:white;  

}

#menu li:hover > ul { 表示: ブロック;   }

#menu ul ul li { 位置:相対;  上:-25px;   左:90ピクセル;   背景:#2937a7;   }

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

#menu ul li:first-child > a:after{ コンテンツ: '';    表示: インラインブロック;境界左: 6 ピクセルの実線透明。    境界線右: 6 ピクセルの実線透明。             ボーダーボトム: 6px ソリッド #CCC;   位置: 絶対;  上: -10px;   左: 60ピクセル;             }

/*第二个小三角代*/

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

left: -8px; 

上: 12px;  

border-left: 0px; 

border-bottom: 5px ソリッド透明; 

border-top: 5px ソリッド透明;  

border-right: 8px ソリッド #444; }

   

  

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