CSSで縦にも伸びる横メニュー

　2008-01-06

　JavaScriptを使わずCSSのみを使って設置できる下にも伸びる横メニューです。縦に伸びるのでコンテンツを増やしやすいと思います。

　で、HTMLのソースはこちら　さらにCSSはこちらになります

<STYLE type="text/css">
<!--


#navi-div{
	background-color: #ff6600;
	width:320px;
	text-align:center;
	font-size:12px;
　　　　　　　margin-top : 3px;
　　　　　　　margin-bottom : 15px;
　　　　　　　border-top-width : 3px;
　　　　　　　border-top-style : solid;
　　　　　　　border-top-color : #0000c2;
}

#menu{
	padding : 0px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
}
#menu li {
	float:left;
	list-style-type: none;
	text-align: center;
	background-color: #fff;
}

#menu .sub li {
	clear: left;
}

#menu li a {
	display: block;
	font-size:12px;
	width: 80px;
	text-decoration: none;
	padding : 1px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
　　　　　　　color : #fff;
  　　　　　　background-color : #ff6600;
}

#menu .sub a {
	border-top: none;
  background-color : #ff9900;
}

#menu a:hover {
	background-color: #0000c2;
}

.sub {
	padding : 0px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
	display: none;
}
#menu li:hover .sub {
	display: block;
	position: absolute;
}

#menu a.top:hover{
	background-color: #02b300;
}

-->
</STYLE>

【補足です】
どうやらブラウザによって表示されないケースがあるようです。

カテゴリ：CSS トラックバック(0) コメント(0)

CSS メニュー

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

スポンサーサイト

CSSで縦にも伸びる横メニュー

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-