後付けでドロップダウンメニューを作りたい

現在画像で作った横並びのナビゲーションメニューがあります。
そこへマウスポントすることでドロップダウンのメニュー（出来れば半透明）を追加したいのですが
うまくいきません。
既存のコードは以下の通りです。
---------------------------------------------------------------------
【css】
#globalnavi{
margin: 0;
padding: 0;
width: 994px;
height: 50px;
background-image: url(../image/button/button-bg.png);
background-repeat: no-repeat;
}

#globalnavi ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#globalnavi li{
text-indent: -9999px;
float:left;
width: 142px;
margin: 0;
padding: 0;
}

#globalnavi a{
display: block;
width: 100%;
height: 50px;
background-image: url(../image/button/button.png);
background-repeat: no-repeat;
}

#menu1 a{background-position: 0 0;}
#menu2 a{background-position: -142px 0;}
#menu3 a{background-position: -284px 0;}
#menu4 a{background-position: -426px 0;}
#menu5 a{background-position: -568px 0;}
#menu6 a{background-position: -710px 0;}
#menu7 a{background-position: -852px 0;}

#globalnavi a:hover{
background-image: url(../image/button/button.png);
background-repeat: no-repeat;
}

#menu1 a:hover{background-position: 0 -50px;}
#menu2 a:hover{background-position: -142px -50px;}
#menu3 a:hover{background-position: -284px -50px;}
#menu4 a:hover{background-position: -426px -50px;}
#menu5 a:hover{background-position: -568px -50px;}
#menu6 a:hover{background-position: -710px -50px;}
#menu7 a:hover{background-position: -852px -50px;}

【html】
<nav id="globalnavi">
<ul>
<li id="menu1"><a href="menu1.html" title="メニュー1">メニュー1</a></li>
<li id="menu2"><a href="menu2.html" title="メニュー2">メニュー2</a></li>
<li id="menu3"><a href="menu3.html" title="メニュー3">メニュー3</a></li>
<li id="menu4"><a href="menu4.html" title="メニュー4">メニュー4</a></li>
<li id="menu5"><a href="menu5.html" title="メニュー5">メニュー5</a></li>
<li id="menu6"><a href="menu6.html" title="メニュー6">メニュー6</a></li>
<li id="menu7"><a href="menu7.html" title="メニュー7">メニュー7</a></li>
</ul>
</nav>
---------------------------------------------------------------------
どうぞ宜しくお願い致します。

No.2 回答者： ORUKA1951 回答日時： 2014/10/18 15:03

＞ドロップダウンのメニュー

　とは階層になっているメニューを:hoverなどの動作で広げることを言う。
　階層でないHTMLでは出来ないです。

※あなたのは、背景を変えたいだけのように見える。
　単純に背景を変えたいだけでしたら・・、スプライトを使う。
<header>
　<nav>
　　<ul>
　　　<li><a href="menu1.html">メニュー1</a></li>
　　　<li><a href="menu2.html">メニュー2</a></li>
　　　<li><a href="menu3.html">メニュー3</a></li>
　　　<li><a href="menu4.html">メニュー4</a></li>
　　　<li><a href="menu5.html">メニュー5</a></li>
　　　<li><a href="menu6.html">メニュー6</a></li>
　　　<li><a href="menu7.html">メニュー7</a></li>
　　</ul>
　</nav>
</header>
※いちいちデザインのためだけにidなんてつけてはならない!!
　何のためのスタイルシートか分からなくなる。

header nav ol,header nav ol li{margin:0;padding:0;}
header nav ol{
width: 994px;
height: 50px;
background-image: url(../image/button/button-bg.png);
font-size:0;
}
header nav ol li{
width: 142px;
margin: 0;
position:relative;
font-size:16px;
}
header nav ol li a{
display: block;width: 100%;height: 50px;
background-image: url(../image/button/button.png);
overflow:hidden;
z-index:-1000px;
}
nav ol li a[href="menue1.html"]{background-position: 0 0;}
nav ol li a[href="menue2.html"]{background-position: -142px 0;}
nav ol li a[href="menue3.html"]{background-position: -284px 0;}
nav ol li a[href="menue4.html"]{background-position: -426px 0;}
nav ol li a[href="menue5.html"]{background-position: -568px 0;}
nav ol li a[href="menue6.html"]{background-position: -710px 0;}
nav ol li a[href="menue7.html"]{background-position: -852px 0;}

nav ol li a[href="menue1.html"]:hover{background-position: 0 -50px;}
nav ol li a[href="menue2.html"]:hover{background-position: -142px -50px;}
nav ol li a[href="menue3.html"]:hover{background-position: -284px -50px;}
nav ol li a[href="menue4.html"]:hover{background-position: -426px -50px;}
nav ol li a[href="menue5.html"]:hover{background-position: -568px -50px;}
nav ol li a[href="menue6.html"]:hover{background-position: -710px -50px;}
nav ol li a[href="menue7.html"]:hover{background-position: -852px -50px;}

No.1 回答者： phantom0112358 回答日時： 2014/10/18 14:17

ulliを入れ子にすれば可能です。

既存のソースのネガティブなポジションが少し複雑だったので簡単に書き直させてもらいました。
とりあえず仕組みはこうなります。
button.pngやbutton-bg.pngを乗せた場合はわからないのでそちらで調整してください。

【CSS】
nav ul,nav ul li{ padding:0; margin:0; list-style-type:none }
nav ul li { display:inline-block; }

nav {
width: 994px;
background: url(../image/button/button-bg.png) no-repeat #000;
}

nav a {
text-decoration: none;
display: block;
}

nav .parent a {
background: url(../image/button/button.png) no-repeat #f00;
}

nav .parent:hover ul {
display: inline-block;
}

nav .child {
position: absolute;
width: 150px;
top: 25px;
display: none;
}

nav .child a {
color: #fff;
padding: 10px 15px;
display: inline-block;
background: url(../image/button/button.png) no-repeat #000;
}


【HTML】
<nav id="globalnavi">
__<ul>
____<li id="menu1" class="parent">
______<a href="#">メニュー1</a>
______<ul class="child">
________<li><a href="#">サブメニュー1-1</a></li>
________<li><a href="#">サブメニュー1-2</a></li>
________<li><a href="#">サブメニュー1-3</a></li>
______</ul>
____</li>
____<li id="menu2" class="parent">
______<a href="#">メニュー2</a>
______<ul class="child">
________<li><a href="#">サブメニュー2-1</a></li>
________<li><a href="#">サブメニュー2-2</a></li>
________<li><a href="#">サブメニュー3-3</a></li>
______</ul>
____</li>
____<li id="menu3" class="parent">
______<a href="#">メニュー3</a>
______<ul class="child">
________<li><a href="#">サブメニュー3-1</a></li>
________<li><a href="#">サブメニュー3-2</a></li>
________<li><a href="#">サブメニュー3-3</a></li>
______</ul>
____</li>
__</ul>
</nav>
整形の維持のためインデントにアンダーバーを入れました。

この回答へのお礼

大変遅くなり申し訳ありません。
遅くなりすぎですが・・・
ありがとうございました。
結果お陰様で何とかうまくいきました。
ありがとございました。

お礼日時：2014/12/16 09:18