ホームページ > 記事 > ウェブフロントエンド > cssナビゲーション_html/css_WEB-ITnose
<%@ 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; }