みんなの「教えて(疑問・質問)」にみんなで「答える」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;
}

ご教授お願いします。

投稿日時 - 2011-10-30 03:30:51

QNo.7102278

すぐに回答ほしいです

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

 他の要素の表示、非表示によって他の要素の位置が影響を受けなくするためには、いずれかが他の位置の算出に影響を与えない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">
<!--
div.section{
_position:relative
}
div.section div.section{position:static;margin-left:170px;}
div.section div.section p{margin:0 1em;text-indent:1em;line-height:1.4em;}
div.section div.nav{/* 位置を決める */
_position: absolute;top: 10px;left: 10px;
_width: 150px;
_font-size:14px;text-align:center;
}
div.section div.nav p.logo{margin:0;}
div.section div.nav ul,div.section div.nav ul li{
_display:block;list-style:none;line-height:20px;
_margin:0;padding:0;
_color:white;
}
div.section div.nav ul{position:absolute;top:0;left:0;}
div.section div.nav ul ul{position:static;display:none;}
div.section div.nav ul li{width:100px;border:solid 1px blue;}
div.section div.nav ul li a{
_display:block;
_width:100%;height:100%;
_font-weight:bold;
_text-decoration: none;
_background-color: #3399ff;
}
div.section div.nav ul li ul li a{
_background-color:silver;
_font-weight:normal;
_font-size:12px;
}
div.section div.nav ul li:hover ul{display:block;}

-->
_</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 10:39:51

お礼

細やかなご指導ありがとうございます。

早速html文章に書き換え閲覧してみたのですが、画像の位置は固定することができていました。

しかし、プルダウンメニューの帯の部分が画像の上に乗ってしまいます。

~略~
div.section div.nav{/* 位置を決める */
_position: absolute;top: 10px;left: 10px;
_width: 150px;
_font-size:14px;text-align:center;
}
~略~

のposition: absolute;・・・略で絶対位置への配置を決めているですよね。
ここの位置関係(画像とメニュー)を上下に隣接することはできないのでしょうか?

理解力が低く申し訳ございません。

投稿日時 - 2011-10-30 11:40:01

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

>しかし、プルダウンメニューの帯の部分が画像の上に乗ってしまいます。
 ということは、そもそもHTMLから見直さないと。
 この画像は、リスト項目1を補完するものだと言うことですね。

 されたいことがわからないのですが、最初に示されたHTMLでは画像が項目の下に表示されます。二番目の項目の画像はあるのですか?

投稿日時 - 2011-10-30 14:12:02

お礼

新しい質問欄に画像を配置したのでお願いします。
http://oshiete.goo.ne.jp/qa/7103012.html

投稿日時 - 2011-10-30 14:53:15

あなたにオススメの質問