メニューサンプル
このページのcss
/*==== 全体スタイル ====*/
body { margin-top: 100px;
}
#container{
margin: 0px auto;
width:650px;
text-align:center;
border: 1px solid #ccc;
}
#content {
margin: 0;
padding: 30px 5px 30px 5px;
float: right;
width: 460px;
text-align: left;
color: #444;
border-left: 1px solid #ccc;
}
#side {
margin: 0;
padding: 30px 5px 0px 5px;
float: left;
width: 160px;
text-align: left;
color: #444;
}
/*== 見出し=====*/
h1,h2{
font-size: 15px;
text-align: left;
text-decoration: underline;
color: #8B525A;
margin: 0px;
}
/*== サイド メニュー列 リスト=====*/
#side ul{
margin: 0;
padding: 0;
list-style: none;
}
#side li{
display: inline;
padding: 0;
margin: 0;
}
#side li a{
display: block;
border: 1px solid #9F99A3;
background-color: #eee;
padding: 3px;
text-decoration: none;
color: #333;
margin: 2px 0px;
text-align: left;
font-size: 13px;
}
#side li a:hover{
border: 1px solid #8593A9;
background-color: #9EB7DD;
color: #fff
}
html
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div id="content">
<h1>メニューサンプル</h1>
</div><!-- //content -->
<div id="side">
<h2>メニュー</h2>
<ul>
<li><a href="#">見出し</a></li>
<li><a href="#">テーブル</a></li>
<li><a href="#">リストメニュー縦並び</a></li>
<li><a href="#">リストメニュー横並び</a></li>
</ul>
</div><!-- //side -->
<br clear="all" />
</div><!-- //container -->
</body>
</html>
