うーん・・・

ドロップダウンメニューが隠れてしまいます

締切済

質問者：kuu006100
質問日時：2016/02/12 23:26
回答数：3件

はじめまして。仕事で、別の方がもともとコーディングされていたデータを修正しなければならないのですが、ＩＥにてドロップダウンメニューを表示することができません。chromeでは問題なくメニューが表示されますが、IEで見るとトップの画像に隠れてしまっているようです。検索等をして色々調べてみたのですが、z-indexを試してもうまくいきませんでした。どうしたらIEでも表示されるようになりますでしょうか？？あまりコーディング知識も豊富なわけでもなくて困っています・・・。
どうかご教授ください。※もし下記の情報に不足がございましたら、ご用意しますので教えていただけると助かります。

【html】
<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="pragma" content="No-Cache" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

</head>
<body id="top" onload="MM_preloadImages('images/menu_over_01.gif','images/menu_over_02.gif','images/menu_over_03.gif','images/menu_over_04.gif','images/menu_over_05.gif','images/menu_over_06.gif');">

<div id="container">

<div id="header">省略</div>


<div class="menu">
<ul>
<li><a href="a.html"><img src="" class="btn"/></a></li>
<li><a href="i.html"><img src="" class="btn"/></a></li>
<li><a href="u.html"><img src="" class="btn"/></a></li>

<li><a href="e.html"><img src="" class="btn"/></a>
<ul>
<li><a href="o.html"><img src="" class="btn"/></a></li>
</ul>
</li>
<li><a href="ka.html"><img src="" class="btn"/></a>
<ul>
<li><a href="ki.html"><img src="" class="btn"/></a></li>
</ul>
</li>
<li><a href="ku.html"><img src="" class="btn"/></a></li>
</ul>
<div class="clear"></div>


</div>


<div id="contents">

<div id="fla">
<script type="text/javascript" src="fla.js"></script>
<noscript><p>※こちらの映像を見るにはJavascriptを有効にして下さい</p></noscript>
</div>

以下省略

【css】
@charset "shift_jis";
body {
　　　省略
　　 background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: center top;
}

/*トップページだけ、背景壁紙画像を変える為。*/
body#top {
background-image: url(images/bgtop.gif);
background-repeat: no-repeat;
background-position: center top;
z-index:1;
}
ul{
list-style-type: none;
}
a:hover {
color: #5e0062;
text-decoration: none;
}

/*メインメニュー（上部に横並びの画像メニュー）
---------------------------------------------------------------------------*/
ul.menu img {
vertical-align: bottom;
}
.menu ul{
margin:0;
padding:0;
position: relative;
}
.menu ul li {
list-style: none;
margin:0;
padding:0;
float: left;
position: relative;
width: 158px;/*親メニューの幅*/
height: 81px;/*親メニューの高さ*/
}
.menu ul li a {
display: block;
text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {

}
.menu ul li ul {
position: absolute;
top: 81px;/*親メニューの高さと同じにする*/
width: 158px;
}
.menu ul li ul li {
visibility: hidden;
overflow: hidden;
width: 158px;/*サブメニューの幅*/
height: 0;
}
.menu ul li ul li:hover, .menu ul li ul li a:hover {
}
.menu ul li:hover ul li, .menu ul li a:hover ul li{
visibility: visible;
overflow: visible;
height:81px;/*サブメニューの高さ*/
z-index: 100;
}
.menu * {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.clear {
clear: both;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2016/02/13 11:38

★z-indexはstatic以外の要素間での指定です。

ごくろうさまです。HTMLが無茶苦茶なので、さぞ大変だろうと思います。
私はすぐに諦めました。
代わりにわかりやすいサンプルを
1) 今時XHTMLはないでしょうから、わかりやすいHTML4.01です。
　HTML5が持つ本当の意味－＠IT( http://www.atmarkit.co.jp/news/200801/25/html.html )

2) HTMLに文書構造以外(デザインのためのclass,idとか)は書かない。
　せっかくスタイルシートを使用する意味がない
　「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　<div class="header"></div>,<div class="nav"></div>
　などは、HTML5にするときはそのまま
　<header></header>,<nav></nav>にすればよい。

3) そのうえで文書構造に基づいてセレクタ書くとHTMLもCSSもわかりやすくなる。他人でもメンテナンスできる。

★参考になるページ
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　にて、[表示]メニュー→[スタイルシート]に進み色々なスタイルシートを選択したり印刷プレビューを確認するとよいでしょう。
　ただし、代替スタイルシートを利用できるIE,Firefoxで、Chromeは代替スタイルシートに対応していない。
　ウェブ開発されているなら、Web 開発( https://addons.mozilla.org/ja/firefox/extensions … )ツールが豊富なfirefoxをお使いだと思いますが、そのアドオンWeb 開発 :: Add-ons for Firefox( https://addons.mozilla.org/ja/firefox/extensions … )を使うと、簡単に調べられます。

[サンプル]
★スタイルシートは次回
★タブは＿に置換してあるので戻す。
★javascriptはブラウザの設定で使えないことが多いので極力避けてある。

<!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=UTF-8">
＿<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">
＿<link rel="stylesheet" href="css/style.css" media="screen">


<style type="text/css">

</style>
</head>
<body>
＿<div class="header">
＿＿<h1>省略</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="a.html">A</a></li>
＿＿＿＿<li><a href="b.html">B</a></li>
＿＿＿＿<li><a href="c.html">C</a></li>
＿＿＿＿<li><a href="d.html">D</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="d-1.html">D-1</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="e.html">E</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="e-1.html">E-1</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="e1-1.html">E-1-1</a></li>
＿＿＿＿＿＿＿＿<li><a href="e1-2.html">E-1-2</a></li>
＿＿＿＿＿＿＿＿<li><a href="e1-3.html">E-1-3</a></li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="f.html">F</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>本文</h2>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ご丁寧にありがとうございます。頂いたアドバイスを拝見しながら月曜日にがんばってみます。

通報する

お礼日時：2016/02/13 14:55

No.2

回答者： ORUKA1951
回答日時：2016/02/13 11:40

スタイルシートです。

★リンクのボタン画像はスプライトにしてあります。一枚の画像をずらしていく

@charset "UTF-8";
/* このスタイルシートは外部 */
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
body {
＿background:white url(images/bg.gif) no-repeat center top;
＿margin: 0px;padding: 0px;
}
div.header{
＿position:relative;
＿height:300px;
}
div.header div.nav{
＿position:absolute;
＿bottom:0;
＿width:100%;
＿text-align:center;
＿z-index:100;/* ★ここが回答 */
}

/* ★必要ならこの部分を生かす */
div.section{
＿position:relative;
＿z-index:0;
}
*/

div.header div.nav a:hover {
＿color: #5e0062;
＿text-decoration: none;
}
div.header div.nav ul,
div.header div.nav ul li{
＿list-style-type: none;
＿margin:0;padding:0;
＿line-height:81px;
}
div.header div.nav ul li {
＿display:inline-block;
＿width: 158px;
＿height: 81px;
＿position:relative;
}
div.header div.nav ul li a {
＿display: block;
＿text-decoration: none;
}
div.header div.nav ul li ul {
＿position: absolute;
＿top: 81px;
＿width: 0%;
＿display:none;
}
div.header div.nav ul li:hover ul{
＿display:block;
＿width:100%;
}
div.header div.nav ul li ul li {
＿width: 100%;
}
div.header div.nav ul li ul li ul{
＿top: 0;
＿left:100%;
＿width: 0;
}
div.header div.nav ul li:hover ul li ul{
＿display:none;
}
div.header div.nav ul li ul li:hover ul{
＿display:block;
＿width:100%;
}
/* ボタンの画像(外部ファイルにしてスプライト指定) */
div.header div.nav ul li a{
＿background-image:url()
}
div.header div.nav ul li a[href="a.html"]{
＿background-position:0 0;
}
div.header div.nav ul li a[href="b.html"]{
＿background-position:82px 0;
}

/* わかりやすいように色付け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.header div.nav{background-color:yellow;}
div.header div.nav ul li{background-color:fuchsia;}
div.header div.nav ul li ul li{background-color:silver;}
div.section{background-color:white;}