(つくば:カエル)

2008年04月02日

at 19:18
posted by @
comments(0)

ドロップダウンメニュー 2

ついでに横メニューverのサンプル。
HTMLとJavaScriptは縦メニューと共通です。

【これまでの経緯】
ドロップダウンメニュー
ドロップダウンメニューとの闘い


【横メニュー】
【CSS】
#menu_container {
font-size: 84%;
line-height: 1.5;
}
#menu_container:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#menu_container {
display: inline-block;
}
/*Hides from IE5-mac \*/
* html #menu_container {
height: 1%;
}
#menu_container {
display: block;
}
*+html body #menu_container {
zoom: 1;
}
/*End hide from IE5-mac */
#menu_container li {
margin-right: 1px;
border: 1px solid #009BCA;
border-top-width: 5px;
position: relative;
text-align: center;
float: left;
}
#menu_container li a {
padding: 5px;
display: block;
width: 160px;
}
#menu_container li a:link, #menu_container li a:visited {
background: #FFF;
}
#menu_container li a:active, #menu_container li a:hover {
color: #FFF;
background: #009BCA;
}
#menu_container ul {
padding-top: 2px;
position: absolute;
left: -1px;
display: none;
}
#menu_container ul li {
margin: 0;
padding-bottom: 1px;
border: 0;
position: static;
text-align: left;
float: none;
}
#menu_container ul li a {
border: 1px solid #009BCA;
}
#menu_container li:hover ul {
display: block;
}



同じカテゴリー(XHTML+CSS)の記事画像
IEでiframeのボーダーが消えない
Firefoxで携帯サイトをシミュレートするアドオン
IEで画像の下に意図しないマージン(余白)が出る
Windows版Safariでテキストエリアのリサイズが可能
IE6でネガティブマージンを指定した画像
styleswitcher.jsでスタイルシート切り替え
同じカテゴリー(XHTML+CSS)の記事
 IEでiframeのボーダーが消えない (2009-07-17 21:00)
 スタイルシートでボックスを中央に配置 (2009-07-07 21:00)
 スタイルシートでボックスを画面中央に配置 (2009-05-19 21:00)
 Firefoxで携帯サイトをシミュレートするアドオン (2008-10-31 15:44)
 IEで画像の下に意図しないマージン(余白)が出る (2008-10-09 11:30)
 JavaScriptがいらないGoogleマップ API (2008-06-02 12:15)


(つくば:カエル)

comments form

名前:
メール:
URL:
コメント: