プルダウンメニューの設置について
- 画像のすぐ上にドロップダウンメニューを設置したいのですが、マウスオンすると下部の画像の表示位置が下がってしまいます。この画像表示位置を動かないようにするにはどうすればいいのでしょうか？
- 画像の上にドロップダウンメニューを設置する際、マウスオンすると画像の表示位置が下がってしまう問題が発生しています。この問題を解決する方法を教えてください。
- ドロップダウンメニューを画像の上に設置したいが、マウスオンした際に画像の表示位置が下がってしまう問題が発生している。この問題を解決するための方法を教えてほしい。
- ベストアンサー
プルダウンメニューの設置について
【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか？ 【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）
- 専門家の回答
質問者が選んだベストアンサー
他の要素の表示、非表示によって他の要素の位置が影響を受けなくするためには、いずれかが他の位置の算出に影響を与えない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>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞しかし、プルダウンメニューの帯の部分が画像の上に乗ってしまいます。 ということは、そもそもHTMLから見直さないと。 この画像は、リスト項目1を補完するものだと言うことですね。 されたいことがわからないのですが、最初に示されたHTMLでは画像が項目の下に表示されます。二番目の項目の画像はあるのですか？
お礼
新しい質問欄に画像を配置したのでお願いします。 http://oshiete.goo.ne.jp/qa/7103012.html
関連するQ&A
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 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 { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px 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:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSのプルダウンメニュー
menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。
- 締切済み
- CSS
- jqueryでのプルダウンメニューについて
jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 縦並びメニューの枠線が重ならない
いつもこちらではお世話になり、ありがとうございます。 ｃｓｓのli:hoverを使ってサブメニューを表示させようとしていますが、 縦並びのサブメニューの枠線が重なってくれません。 どこが間違えているのでしょうか。 ご指摘をお願いいたします。 （素人ですので、他にもつっこみどころがかなりあると思います。 すみません（汗）） 【html】 <ul class="menu"> <li><a href="menu1.html" >メニュー１</a></li> <li><a href="menu2.html">メニュー２</a> <ul> <li><a href="submenu1.html">サブメニュー１</a></li> <li><a href="submenu2.html">サブメニュー２</a></li> </ul> </li> <li><a href="menu3.html" >メニュー３</a></li> <li><a href="menu4.html" >メニュー４</a></li> </ul> 【css】 ul.menu { margin: 0px; padding:0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 107px; line-height: 43px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; color: #202020; font-family: "メイリオ"; font-size: 11px; } ul.menu li a:hover{ background-image: url(images/navi_r.png); } ul.menu li ul{ display: none; position: absolute; top: 165px; left: 210px; list-style-type : none; background-image: none; } ul.menu li:hover ul{ display: block; } ul.menu li ul li{ clear: left; width: 106px; line-height: 35px; border: 1px #989590 solid; border-collapse: collapse; } ul.menu li ul li a{ background: none; background-color:#B28872; color:#ffffff; } ul.menu li ul li a:hover{ background: none; background-color: #643E3E; color:#ffffff; } よろしくお願いします。
- ベストアンサー
- HTML
- cssのみ使用したプルダウンメニュー
はじめまして。 cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。 コードとcssは以下です。 aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。 .main li .sub{ visibility:hidden; } で子孫リストは消えるものの、 .main li : hover .sub{ visibility:visible; } と設定しても現れてくれません。 どうすれば上手くいくでしょうか。 すみませんがよろしくお願いします。 ・html <nav class="common_width"> <ul class="main"> <li><a href="#">profile</a></li> <li><a href="#">about</a> <ul class="sub"> <li><a href="#">profile</a></li> <li><a href="#">blog</a></li> <li><a href="#">itai</a></li> </ul> </li> <li><a href="#">test</a></li> </ul> </nav> ・css li{ list-style:none; } .common_width{ width:900px; margin:0 auto; } a { color: #000; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s; } /*全部のリスト*/ nav li{ width:150px; } /*直下のul*/ nav > ul{ width:650px; margin:0 auto; overflow:hidden; } /*直下のリスト*/ nav .main li{ float:left; color: #9f9f9f; position: relative; margin-left:100px; } nav .main li:first-child{ border-left:none; margin-left:0px; } nav ul>li a{ padding:10px 0 10px 0 ; background-color: #ccc; display: block; text-align: center; line-height:1; } nav li:hover > a{ color: #fff; background-color: #000; } .main li .sub{ visibility:hidden; } .main li : hover .sub{ visibility:visible; } nav ul li a:hover{ color: #fff; display:block; background-color: #000; } nav .sub li { font-size: 12px; color:#fff; border-top:1px dotted #fff; text-align:center; margin-left:0px; }
- ベストアンサー
- HTML
- jQuery プルダウンメニュー
プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。
- 締切済み
- JavaScript
- CSSでプルダウンメニュー
お世話になります。 添付画像のようなプルダウンメニューを作りたいです。 http://css-eblog.com/csstechnique/css-8.html こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。 問題はマウスオーバーさせたい画像の高さ（60px）とプルダウンで出てくるもの（画像は使用せずCSSで背景色をしたバー状になっています）の高さ（20px）が異なることです。 添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。 ※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。 そこでソースの値を .menu ul li a { display: block; height: 20px;←ココ padding:3px; } と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。 知識がなくどうしていいのかサッパリ分かりません。 どうか助けて下さい！ 下記ソースです。 /* CSS*/ .menu { margin:0px auto; padding:0px; width:760px; height:60px; } .menu ul li { float: left; position: relative; margin-right: 0px; width: 128px; height: 20px; list-style:none; } .menu ul li table { border-collapse: collapse; border: none; font-size: 10px; padding: 0; position: absolute; top: 0; left: 0; } .menu ul li ul { visibility: hidden; overflow: hidden; position: absolute; top:60px; left: 0px; width: 128px; height:20px; z-index: 100; } .menu ul li ul li { margin-bottom: 0; width: 128px; height: 20px; } .menu ul li a { display: block; height: 60px; padding:3px; } .menu ul li a:hover { position: relative; z-index: 100; } .menu ul li:hover ul , .menu ul li a:hover ul { visibility: visible; overflow: visible; height: auto; z-index: 10; } .menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;} .menu li.sub { background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;} a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/ a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;} a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;} a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;} <!--html--> <div class="menu"> <ul> <li class="test"><a href="test.html"><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="sub"><a href="test.html" class="sub">リンク先1</a></li> <li class="sub"><a href="test2.html" class="sub">リンク先2</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 長文申し訳ありません。よろしくお願い致します。
- ベストアンサー
- CSS
- ページを開いた直後のサブメニューを非表示
現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとＣＳＳのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }
- ベストアンサー
- JavaScript
- 画像を使ったドロップダウンメニュー
ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #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-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #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-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }
- 締切済み
- Java
- メニューバーが消えて困っています。
メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p> ← 問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }
- ベストアンサー
- CSS
お礼
細やかなご指導ありがとうございます。 早速html文章に書き換え閲覧してみたのですが、画像の位置は固定することができていました。 しかし、プルダウンメニューの帯の部分が画像の上に乗ってしまいます。 ～略～ div.section div.nav{/* 位置を決める */ ＿position: absolute;top: 10px;left: 10px; ＿width: 150px; ＿font-size:14px;text-align:center; } ～略～ のposition: absolute;・・・略で絶対位置への配置を決めているですよね。 ここの位置関係（画像とメニュー）を上下に隣接することはできないのでしょうか？ 理解力が低く申し訳ございません。