プルダウンメニューがうまくいかない

スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。
サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。

■HTML■
<a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a>
<span>|</span>

<a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a>
<span>|</span>

<div id="menu1" onMouseOver="MenuOn(1)"
onMouseOut="MenuOff(1)">
<a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a>
<div class="submenu" id="submenu1">
<a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント１</a>
<span>|</span>
<a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント２</a>
<span>|</span>
<a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント３</a>
</div>
</div>

<span>|</span>
<a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a>
<span>|</span>

<div id="menu2" onMouseOver="MenuOn(2)"
onMouseOut="MenuOff(2)">
<a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ１</a>
<div class="submenu" id="submenu2">
<a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ１</a>
<span>|</span>
<a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ２</a>
<span>|</span>
<a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a>
</div>
</div>
省略
</div>

■スタイルシート■

.menu {
font-size:0.75em;
margin-left:0;
margin-right:0;
margin-bottom:50px;
margin-top:0;
height:2em;
width:140px;
border-top:solid 1px #33cc99;
position:absolute;
text-align:left;
left:0;
top:95px;
padding-left:10px
}

.menu a {
color:#33cc99;
border-bottom:solid 1px #33cc99;
text-decoration:none;
display:block;
width:100%;
line-height:2em;
text-align:left;

}

.menu a:hover {
background-color:#ffffcc;
}

.menu span {
color:#000000;
display:none;
}

.menu img {
margin-right:10px;
margin-left:5px;
border:0
}


.submenu a{
background-color:#33cc99;
border-bottom:solid 1px #ffffff;
color:#ffffff;
width:100%;

}

.submenu {
visibility:hidden;
position:absolute;
left:0;
width:140px;
padding-left:10px;

}

.submenu a:hover {
background-color:#0099cc;
width:140px;
}

#submenu1 {
position:absolute;
left:0;
}

#submenu2 {
position:absolute;
left:0
}

#submenu3 {
position:absolute;
left:0
}

#submenu4 {
position:absolute;
left:0
}

#submenu5 {
position:absolute;
left:0
}

#submenu6 {
position:absolute;
left:0
}

■Javascript■

function MenuOn(x){
obj=document.getElementById("submenu"+x).style.visibility="visible";
}

function MenuOff(x){
obj=document.getElementById("submenu"+x).style.visibility="hidden";
}

No.3 回答者： leap_day 回答日時： 2007/04/05 09:37

度々こんにちは(笑）

あぁなるほど～
サブメニューを横に並べるを勘違いしていたのですね（＞＜）

でしたら下記のようにしてください

<style type="text/css">
<!--
a {
text-decoration:none;
}

#menu {
position:relative;
}

#submenu1 {
position:absolute;
top:-20px;
left:150px;
display:none;
}
#submenu1 a {
background-color:#33cc99;
}
#submenu1 a:hover {
background-color:#ffffcc;
}

#submenu2 {
position:absolute;
top:-20px;
left:150px;
display:none;
}
#submenu2 a {
background-color:#33cc99;
}
#submenu2 a:hover {
background-color:#ffffcc;
}
#menu img {
width:8px;
height:12px;
}
//-->
</style>

<script language="javascript">
<!--
function MenuOn(x,y){
document.getElementById("submenu"+x).style.display="block";
document.getElementById("submenu"+y).style.display="none";
}

function MenuOff(x){
document.getElementById("submenu"+x).style.display="none";
}
//-->
</script>

<a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> |<br>

<a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> |

<div id="menu">
<span onMouseOver="MenuOn(1,2)">
<a href="event/index.html"><img src="images/menu.gif">お知らせお知らせ</a> |
</span>
<span id="submenu1" onMouseOver="MenuOn(1,2)" onMouseOut="MenuOff(1)">
<a href="event/index.html"><img src="images/submenu.gif">イベント１</a> |<br>
<a href="event/2.html"><img src="images/submenu.gif">イベント２</a> |<br>
<a href="event/3.html"><img src="images/submenu.gif">イベント３</a> |
</span>
</div>

<a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> |

<div id="menu">
<span onMouseOver="MenuOn(2,1)">
<a href="mainmenu1/index.html"><img src="images/menu.gif">メインメニュ１</a> |
</span>
<span id="submenu2" onMouseOver="MenuOn(2,1)" onMouseOut="MenuOff(2)">
<a href="mainmenu1/index.html"><img src="images/submenu.gif">サブメニュ１</a> |<br>
<a href="mainmenu1/submenu2.html"><img src="images/submenu.gif">サブメニュ２</a> |<br>
<a href="mainmenu1/submenu3.html"><img src="images/submenu.gif">サブメニュ３</a> |
</span>
</div>
省略

前回の補足に書かれているようにサブメニューを開いたときに下にずらして作ってもいいのなら
#menu{ }
position:absolute;
position:relative;
top:-20px;
left:150px;
<div id="menu"></div>
を削除して
<span>を<div>に
#menu imgを#submenu1 imgに変更して
それをコピーして#submenu2 imgを作ってください

上記のやり方ではいくつか制限がありますので・・・（－－；）
・サブメニューは３つまで
・例のように展開させる物の間に必ず1行展開させないものを入れないといけない

この回答への補足

自分でいろいろ考えた結果、今回は諦めようと思ったのですが諦めきれず、本当はしたくなかった「フォントのサイズをピクセルで指定」をし、サブメニューも絶対位置におき、メインメニューの右端に矢印の画像を置くことでキレイなプルダウンメニューを作ることが出来ました。

補足日時：2007/04/05 17:25

この回答へのお礼

何度もありがとうございます。

その通りにやってみたんですが・・・ちょっと違うような。
（わがまま言ってごめんなさい）

http://www.stylish-style.com/csstec/ultimate/css …

こういうのが作りたいんですけどCSSの設定がうまく出来なくて
やっぱり勉強しなおさないといけないみたいです。

本当に感謝しています。
ありがとうございました。

お礼日時：2007/04/05 13:05

No.2 回答者： leap_day 回答日時： 2007/04/04 08:22

こんにちは

？？）　position指定は一切していませんよ？
positionを使うとtextの上に表示されるような感じになるのでtextの位置関係とか色々考えないといけなくなってちょっと面倒ですので・・・

下記のをそのままコピペしてもらえればIE,Opera,Firefoxでは([img]は画像です）

[img]トップページ |
[img]注意事項 |
[img]お知らせお知らせ |
[img]ああああああああ |
[img]メインメニュ1 |
省略

という感じに表示されて
『お知らせお知らせ』と『メインメニュ１』にマウスオーバーすると

[img]トップページ |
[img]注意事項 |
[img]お知らせお知らせ | [img]イベント1 | [img]イベント2 | [img]イベント3 |
[img]ああああああああ |
[img]メインメニュ1 | [img]サブメニュ1 | [img]サブメニュ2 | [img]サブメニュ3 |
省略

のようにイベントとサブメニュが横に出てきてますけど？

・・・見直してみてちょっと修正（－－；）

・お知らせお知らせのところとメインメニュのところの『 class="menuhead"』は指定していないので消去してください

・最後の</div>は消去してください

IE,Opera,Firefox以外のブラウザを使用されてるのでしょうか？

この回答へのお礼

回答ありがとうございます。
サブメニューは縦に並べて、それをメインメニューの横に表示させたいんです・・

今の状態だとメインメニューの下に出るのですが、それはいいとしてもその下のメインメニューまで隠れてしまいます。下のメインメニューも下に下がるようにすればいいんでしょうが・・・

難しいです。がんばります。

考えてくださってありがとうございました。

お礼日時：2007/04/04 13:37

No.1 回答者： leap_day 回答日時： 2007/04/03 18:57

こんにちは

色々と分からない部分が多いのでかなり省略しています（＞＜）
・submenu3～6がない
・class="menu"がないので　.menuが何処のことか分からない
・メインメニューは横並び？縦並び？(横に出すから縦並びかな～それでやってます）

↓こんな感じかな（＾＾）
（submenu a のwidth指定はIEのみ有効でOpera,firefoxでは無理でした（＞＜）
あとは足りない部分を随時足してくださいｍ（－－）ｍ）

<style type="text/css">
<!--
a {
text-decoration:none;
}

#submenu1 {
visibility:hidden;
}
#submenu1 a {
background-color:#33cc99;
width:140px;
}
#submenu1 a:hover {
background-color:#ffffcc;
}

#submenu2 {
visibility:hidden;
}
#submenu2 a {
background-color:#33cc99;
width:140px;
}
#submenu2 a:hover {
background-color:#ffffcc;
}

//-->
</style>

<script language="javascript">
<!--
function MenuOn(x){
obj=document.getElementById("submenu"+x).style.visibility="visible";
}

function MenuOff(x){
obj=document.getElementById("submenu"+x).style.visibility="hidden";
}
//-->
</script>

<a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> |<br>

<a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> |

<div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)">
<a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> |
<span id="submenu1">
<a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント１</a> |
<a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント２</a> |
<a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント３</a> |
</span>
</div>

<a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> |

<div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)">
<a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ１</a> |
<span id="submenu2">
<a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ１</a> |
<a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ２</a> |
<a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> |
</span>
</div>
省略
</div>

この回答へのお礼

すみません。全然だめでした。
メインメニューの下にサブメニューが表示されてしまいます。
たぶんサブメニューをrelativeでleft:140px; top:-2em;とすれば
いいと思うのですがどこで指定すればいいのか分かりません。

submenuの位置をrelativeにすると空白が出来てしまうし。
この方法では無理なんでしょうか。


回答ありがとうございました。

お礼日時：2007/04/04 00:38