縦タイプとの大きな違いは、class 名です。
あと、スクリプトで YAHOO.widget.Menu では無く YAHOO.widget.MenuBar を使っているところ
( autosubmenudisplay: true を指定しています。)
<div style='position:relative'>
<div class="yui-skin-sam" style='position:absolute;left:0px;top:5;'>
<div id="menuunit_1" class="yuimenubar yuimenubarnav" style=''>
<div id="menuunit_style_1" class="bd">
	<ul class="first-of-type">
		<!-- 基本メニューの１ -->
		<li class="yuimenubaritem"><a
			class="yuimenubaritemlabel"
			href="http://hp.vector.co.jp/authors/VA003334/"
			target="_blank"
		>SQLの窓1</a></li>
		<!-- 基本メニューの２ -->
		<li class="yuimenubaritem"><a
			class="yuimenubaritemlabel"
			href="http://winofsql.jp/"
			target="_blank"
		>SQLの窓2</a></li>
		<!-- 基本メニューの３ -->
		<li class="yuimenubaritem"><a
			class="yuimenubaritemlabel"
			href="http://homepage2.nifty.com/lightbox/"
			target="_blank"
		>SQLの窓3</a></li>
	</ul>
</div>
</div>
</div>
</div>
Yahoo UI では、メニューの色を変える事を想定しない設計になっているので
無理に変えないほうが良いでしょう。


どうしても思い通りに変えたい場合は、css ファイルや画像を変更する必要があります。
以下、このページ用の css です

<STYLE type="text/css">
* {
	font-family: "ＭＳ Ｐゴシック";
	font-size: 12px;
}
BODY {
	background-color: white;
	color: black;
}

/* メニュー本体 */
#menuunit_1 {
	visibility:hidden;	/* 初期状態 : 元々は ul-li なので非表示にする */
/*	width:700px; */
}

/* トップメニューの色や形状 */
#menuunit_style_1 {

}

/* サブメニューの色や形状 */
.bd {

}

/* メニュー共通 */
.bd A {
	font-family: "ＭＳ Ｐゴシック" !important;
	font-size: 12px !important;
	text-align: left;
}

</STYLE>