fire foxでリスト番号が表示されてしまう

質問

プルダウンメニューを使っていてリストマークを表示しない設定にしていますが、firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。原因が分かる方いらっしゃいましたら解決方法を教えてください。(下記は5つメニューがある中の3つ分のHTMLとCSSです。)
＜==HTML==>
<div id="menu">
<ul class="main">
<li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">トップ</a> </li>
</ul>
<ul class="main2">
<li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">メニューのご紹介</a>
<ol class="sub">
<li><a href="#">トップ</a></li>
</ol>
<ol class="sub2">
<li><a href="#">メニューのご紹介</a></li>
</ol>
</li>
</ul>
<ul class="main3">
<li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">店舗のご案内</a>
<ol class="sub3">
<li><a href="#">店舗のご案内</a></li>
</ol>
<ol class="sub4">
<li><a href="#">当店の歴史</a></li>
</ol>
<ol class="sub5">
<li><a href="#">ご予約</a></li>
</ol>
</li>
</ul>
</div>

<==CSS==>
/****全体位置の決定****/
#menu{
width:630px;
height: 89px;
float: left;
z-index: 1000;
margin-top: 20px;
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
left: 4px;
top: -12px;
font-size: 0.8em;
position:relative;
}

/****メインメニュー用スタイル****/

ul.main{
margin:0px;
padding:0px;
list-style:none;
text-align:center;
width: 126px;
float: left;
height: 40px;
}

ul.main2{
margin:0px;
padding:0px;
list-style:none;
text-align:center;
width: 126px;
float: left;
height: 40px;
}

ul.main3{
margin:0px;
padding:0px;
list-style:none;
text-align:center;
width: 126px;
float: left;
height: 40px;
}

/*通常時*/
.main li.off{
position:relative;/*×*/
float:left;/*×*/
height:40px;/*○*/
width:126px;/*○*/
overflow:hidden;/*○*/
}

.main2 li.off{
position:relative;/*×*/
float:left;/*×*/
height:40px;/*○*/
width:126px;/*○*/
overflow:hidden;/*○*/
}

.main3 li.off{
position:relative;/*×*/
float:left;/*×*/
height:40px;/*○*/
width:126px;/*○*/
overflow:hidden;/*○*/
}

/*展開時*/

.main li.on{
float:left;/*×*/
overflow:hidden;/*×*/
width:126px;/*○*/
list-style:none;
}

.main>li.on{
overflow:visible;/*×*/
}

.main2 li.on{
float:left;/*×*/
overflow:hidden;/*×*/
width:126px;/*○*/
list-style:none;
}

.main2>li.on{
overflow:visible;/*×*/
list-style-type:none;
}

.main3 li.on{
float:left;/*×*/
overflow:hidden;/*×*/
width:126px;/*○*/
list-style:none;
}

.main3>li.on{
overflow:visible;/*×*/
}

/*リンクスタイル*/
.main a{
display:block;
text-decoration:none;
background-image: url(images/m_top.jpg);
background-repeat: no-repeat;
height: 40px;
width: 126px;
text-indent:-2000px;
}

.main a:hover{
background-image: url(images/m_top-on.jpg);
}

.main2 a{
display:block;
text-decoration:none;
background-image: url(images/m_menu_list.jpg);
background-repeat: no-repeat;
height: 40px;
width: 126px;
text-indent:-2000px;
}

.main2 a:hover{
background-image: url(images/m_menu_list-on.jpg);
}

.main3 a{
display:block;
text-decoration:none;
background-image: url(images/m_store.jpg);
background-repeat: no-repeat;
height: 40px;
width: 126px;
text-indent:-2000px;
}

.main3 a:hover{
background-image: url(images/m_store-on.jpg);
}

/****サブメニュー用スタイル****/
ol.sub{
text-align:left;
margin: 0px;
padding: 0px;
height: 40px;
width: 126px;
}

回答No.1

abril

> firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。

今手元にFirefoxがない環境なので検証できませんが、ソースをぱっと見たところ<ol>のlist-styleが"none"に初期化されていなければ、「オーダー・リスト」なので番号が表示されるのは当然の結果ではないかと。
ol {
list-style: none;
}
を追加すればリスト番号は表示されなくなります。他環境で表示されていないのは、親要素のいずれかから"list-style-type: none;"を継承しているためかmargin/paddingの値が0になっているためか？と（詳細を未検証の為、断定はしません）。ちなみに今見ているのはSafariですが、Safari上でもやはりFirefoxで見えているのと同様、<ol>部分のリスト番号が全て表示されております。

ただ、ここで素朴な疑問なのですが、何故サブメニュー部分が<ul>ではなく<ol>なのでしょうか？メインメニューに対するサブメニューを番号付きリストにしたい、というのは内容によってはわからないわけではありませんし、間違いでもありません。ただ、提供されたソースを見る限りではその必然性がわかりかねるので…例えば、<ul class="main3">に対するサブメニューは3アイテムある様ですが、であれば、
<ol class="sub3">
<li><a href="#">店舗のご案内</a></li>
<li><a href="#">当店の歴史</a></li>
<li><a href="#">ご予約</a></li>
</ol>
となるのが適切の様に思われるのですが、何故か更に1アイテムづつ別々の<ol>でマークアップされていますよね（だから常に"1"が表示されます）。何か理由がありますか？リンク部分を実際には背景画像（おそらくナビボタンでしょう）で表示させるので個別の画像を指定しなければならないから、という事が理由なら、<li>に直接idを振ってCSSでの定義を分ければ済む事ですし…