Coding Architecture

ドロップダウンのかわりにいいかも。Horizontal Subnav with CSSを参考。
IE6対策でjQueryつかっています。参考サイトは、jQueryのjs読み込みがミスっていてIE6で動きません。だから、ちょっと試してみました。

demo

■jQuery
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#ec6800 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});

■CSS
ul#topnav {
margin: 0;
padding: 0;
float: left;
width: 500px;
list-style: none;
position: relative;
font-size:93%;
background: #333;;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #ec6800; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 500px;
background: #ec6800;
color: #fff;
-moz-border-radius-bottomright: 3px;
-khtml-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-khtml-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}


■HTML
<ul id="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">企業情報</a>
<span>
<a href="#">ご挨拶</a> |
<a href="#">会社概要</a> |
<a href="#">企業理念</a> |
<a href="#">会社沿革</a> |
<a href="#">アクセスマップ</a>
</span>
</li>
<li>
<a href="#">採用情報</a>
<span>
<a href="#">新卒採用</a> |
<a href="#">中途採用</a>
</span>
</li>
</ul>