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

質問

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

■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

度々こんにちは(笑）

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

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

<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行展開させないものを入れないといけない

お礼

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

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

http://www.stylish-style.com/csstec/ultimate/css-roll-2.html

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

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

補足

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

回答No.2

leap_day

こんにちは

？？）　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以外のブラウザを使用されてるのでしょうか？

お礼

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

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

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

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

回答No.1

leap_day

こんにちは

色々と分からない部分が多いのでかなり省略しています（＞＜）
・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にすると空白が出来てしまうし。
この方法では無理なんでしょうか。

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