プルダウンメニューの設置について

2011/10/30 03:30

このQ&Aのポイント

画像のすぐ上にドロップダウンメニューを設置したいのですが、マウスオンすると下部の画像の表示位置が下がってしまいます。この画像表示位置を動かないようにするにはどうすればいいのでしょうか？
画像の上にドロップダウンメニューを設置する際、マウスオンすると画像の表示位置が下がってしまう問題が発生しています。この問題を解決する方法を教えてください。
ドロップダウンメニューを画像の上に設置したいが、マウスオンした際に画像の表示位置が下がってしまう問題が発生している。この問題を解決するための方法を教えてほしい。

プルダウンメニューの設置について

【質問内容】画像のすぐ上にドロップダウンメニューを設置したいのですが、マウスオンすると下部の画像の表示位置が下がってしまいます。この画像表示位置を動かないようにするにはどうすればいいのでしょうか？【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="#" /> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 2</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> <li><a href="#">サブメニュー 4</a></li> </ul> </li> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 3</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> 【css】 @charset "utf-8"; #navi_continer { position: relative; z-index:100; width: 300px; height:30px; } #navi { position: absolute; top: 10px; left: 10px; width: 150px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; } ご教授お願いします。

justin_shingo
お礼率100% (10/10)

ホームページ作成ソフト
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/30 10:39 回答No.1

他の要素の表示、非表示によって他の要素の位置が影響を受けなくするためには、いずれかが他の位置の算出に影響を与えないabsoluteまたはfixedでないとなりません。画像が、ul内に書かれていますが誤りです。　私は、今はXHTMLはよほど必要のない限り使っていませんので、下記サンプルはHTML4.01strict+CSS2.1(いわゆるウェブ標準)です。　class名をそのまま要素名にすればHTML5になります。<div class="section">→<section> ★スタイルのためだけの余分なID,class名は使ってません。 ★divのclass名は、文書構造を示すものにしてあります。　「DIV要素・【中略】・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) で検証済み。ただし、Another HTML-lintでは減点される。以下、＿はタブに戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>プルダウンメニューの設置について</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> <div class="header"> ＿<h1>プルダウンメニューの設置について</h1> </div> <div class="section"> ＿<div class="section" id="SECTION1"> ＿＿<h2>見出し</h2> ＿＿<div class="section" id="SECTION1-1"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿＿<div class="section" id="SECTION1-2"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿</div> ＿<div class="section" id="SECTION2"> ＿＿<h2>見出し</h2> ＿＿<div class="section" id="SECTION2-1"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿＿<div class="section" id="SECTION2-2"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿＿<div class="section" id="SECTION2-3"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿＿<div class="section" id="SECTION2-4"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿</div> ＿<div class="section" id="SECTION3"> ＿＿<h2>見出し</h2> ＿＿<div class="section" id="SECTION3-1"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿＿<div class="section" id="SECTION3-2"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿＿<div class="section" id="SECTION3-3"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文</p> ＿＿</div> ＿</div> ＿<div class="nav" id="navigation"> ＿＿<p class="logo"><img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="ロゴ"></p> ＿＿<ul> ＿＿＿<li><a href="#SECTION1">メニュー 1</a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="#SECTION1-1">サブメニュー 1</a></li> ＿＿＿＿＿<li><a href="#SECTION1-2">サブメニュー 2</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li> ＿＿＿<a href="#SECTION2">メニュー 2</a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="#SECTION2-1">サブメニュー2-1</a></li> ＿＿＿＿＿<li><a href="#SECTION2-2">サブメニュー2-2</a></li> ＿＿＿＿＿<li><a href="#SECTION2-3">サブメニュー2-3</a></li> ＿＿＿＿＿<li><a href="#SECTION2-4">サブメニュー2-4</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<a href="#SECTION3">メニュー 3</a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="#SECTION3-1">サブメニュー3-1</a></li> ＿＿＿＿＿<li><a href="#SECTION3-2">サブメニュー3-2</a></li> ＿＿＿＿＿<li><a href="#SECTION3-3">サブメニュー3-3</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿</ul> ＿</div> </div> </body> </html>

質問者

お礼 2011/10/30 11:40

細やかなご指導ありがとうございます。早速html文章に書き換え閲覧してみたのですが、画像の位置は固定することができていました。しかし、プルダウンメニューの帯の部分が画像の上に乗ってしまいます。～略～ div.section div.nav{/* 位置を決める */ ＿position: absolute;top: 10px;left: 10px; ＿width: 150px; ＿font-size:14px;text-align:center; } ～略～のposition: absolute;・・・略で絶対位置への配置を決めているですよね。ここの位置関係（画像とメニュー）を上下に隣接することはできないのでしょうか？理解力が低く申し訳ございません。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/30 14:12 回答No.2

＞しかし、プルダウンメニューの帯の部分が画像の上に乗ってしまいます。　ということは、そもそもHTMLから見直さないと。　この画像は、リスト項目1を補完するものだと言うことですね。　されたいことがわからないのですが、最初に示されたHTMLでは画像が項目の下に表示されます。二番目の項目の画像はあるのですか？

質問者