水平ドロップダウン menu_html/css_WEB-ITnose の純粋な CSS 実装

• メニュー 1

  • < ;a href="#">メニュー 1-1

  • メニュー 1-2

  • メニュー 1-3

  < ;/li>

• メニュー 2

  • < ;a href="#" >メニュー 2-1

  • メニュー 2-2

    < ;/リ>

  • メニュー 2-3

  < /li>

  < ; li＆gt;

  ＆lt; a href = "＃"＆gt;メニュー3＆lt;/a＆gt;

  ＆lt; ul＆gt; /a>

• メニュー 3-2

• メニュー 3-3

#menu {

font-family: Arial;

font-size: 14px;

width: 500px;

overflow: hidden;

}

#menu,あなたは{

list-style-type: none;

背景: #A3C159;

マージン: 0;

パディング: 0;

}

#menu li {

float: left;

}

#menu li a {

表示: ブロック;

パディング: 10px 15px;

color: #FFF;

text-decoration: none;

border-right: 1px Solid #FFF;

}

#menu li a:hover {

背景: #1BA6B2;

}

#menu li ul li {

float: none;

}

#メニューリウルリア{

border-top: 1px Solid #FFF;

}

#menu li ul {

表示: none;

位置: 絶対;

}

#メニュー リ:ホバーul {

display: block;

}

备注: IE6 はサポートされていません。