MOVABLE PRESS

<div id="navi" class="packet">
<ul>
<li><a href="/">ホーム</a></li>
<li class="stay"><a href="about.html">このサイトについて</a></li>
<li><a href="sitemap.html">サイトマップ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div>
<div id="marker"><span class="about">▼</span></div>

#navi {
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
width: 100%;
font-size: 11px;
margin: 20px 0 0 0;
padding: 20px 0;
background: #fff;
}

#navi ul {
list-style-type: none;
overflow: hidden;  /*レイアウト崩れ防止*/
height: 60px;  /*ボックスの高さを指定*/
margin: 0;
padding: 0;
border-left: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}

#navi li {
float: left;  /*後続を左寄せに浮動させる*/
width: 94px;
margin: 0 1px 0 0;
padding: 0;
}

* html #navi li {
margin: 0;  /*IE6用のハック*/
}

#navi a {
display: block;
padding: 35px 0 14px 0;
color: #aaa;
text-decoration: none;
text-align: center;
border-right: 1px solid #aaa;
background: #222;
width:100%;  /* for IE */
}

#navi .stay a {
background: #444;
}

#navi .stay a:hover {
color: #ccffcc;
background: #444;
}

#navi a:hover {
color: #ccffcc;
background: #444;
}

#marker {
font-size: 30px;
color: #444;
position: relative;
top: -36px;
}

#marker span {
display: block;
width: 30px;
height: 30px;
}

span.home {
position: relative;
left: 36px;
}

span.about {
position: relative;
left: 132px;
}

span.sitemap {
position: relative;
left: 226px;
}

span.contact {
position: relative;
left: 320px;
}

.packet:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* IE7用ハック　▼ */
*:first-child+html .packet {
min-height:1px;
}
/* IE7用ハック　▲ */

/* Hides from IE-mac　▼ \*/
* html .packet {
height:1%;
}
/* hide from IE-mac　▲ */