ライブロアブログで横並びメニューを作成する方法を教えてください。

横並びメニューの作成方法がわかりません。floatを使用しcssをいじるのですができません。
　初心者ですので、よろしくお願いします。

回答1.よりもっとシンプルで良いんじゃないでしょうか。floatを使うだけで出来ませんか？
HTMLは

<div id="navi">
 <ul>
  <li class="menuItemFirst"><a href="menu1.html">menu1</a></li>
  <li class="menuItem"><a href="menu2.html">menu2</a></li>
  <li class="menuItem"><a href="menu3.html">menu3</a></li>
  <li class="menuItem"><a href="menu4.html">menu4</a></li>
  <li class="menuItemLast"><a href="menu5.html">menu5</a></li>
 </ul>
</div>

CSSは

div#navi {
 margin: 10px auto;
 width: 980px; }
div#navi li {
 float: left; }
div#navi li.menuItemFirst {
 margin: 0 5px 0 0; }
div#navi li.menuItem {
 margin: 0 5px; }
div#navi li.menuItemLast {
 margin: 0 0 0 5px; }
div#navi a {
 display: block;
 padding: 5px 10px;
 text-align: center;
 width: 168px; }
div#navi a:link
, div#navi a:visited {
 text-decoration: none;}
div#navi a:hover
, div#navi a:active {
 font-weight: bold;
 text-decoration: none; }

な具合です。実際に私がこのようにして使っています。


ポイントはリストのliをfloatで横並びにしつつ、中に含まれるa要素をdisplay:blockを使って横幅を持った大きさにすることで、メニューをクリックしたときの領域をメニューアイテム全体にしている点です。

例えば、こんな感じ・
メニュー部分

<div id="menu">
<ul>
<li><a id="tab1" href="メニュー１のアドレス">メニュー１</a></li>
<li><a id="tab2" href="メニュー２のアドレス">メニュー２</a></li>
<li><a id="tab3" href="メニュー３のアドレス">メニュー３</a></li>
<li><a id="tab4" href="メニュー４のアドレス">メニュー４</a></li>
<li><a id="tab5" href="メニュー５のアドレス">メニュー５</a></li>
</ul>
</div>

これを、デザインのカスタマイズで、テンプレートの適当な場所に入れる。

スタイルシート

#menu {
}
#menu ul {
    background-color:AliceBlue;
    font-size:12pt;
    margin:0;
    padding:0;
}
#menu ul li {
    list-style-type:none;
    width:120px;
    height:35px;
    background-color:LightSteelBlue;
    display:inline;
    float:left;
    padding-top:18px;
    text-align:center;
    border:1px gray solid;
}
#menu ul li a{
    color:red;
    text-decoration:none;
}

それぞれの数値は、内容とかブログの想定している表示幅などで変える。