いつもこちらではお世話になり、ありがとうございます。
cssのli:hoverを使ってサブメニューを表示させようとしていますが、
縦並びのサブメニューの枠線が重なってくれません。
どこが間違えているのでしょうか。
ご指摘をお願いいたします。
(素人ですので、他にもつっこみどころがかなりあると思います。
すみません(汗))
【html】
<ul class="menu">
<li><a href="menu1.html" >メニュー1</a></li>
<li><a href="menu2.html">メニュー2</a>
<ul>
<li><a href="submenu1.html">サブメニュー1</a></li>
<li><a href="submenu2.html">サブメニュー2</a></li>
</ul>
</li>
<li><a href="menu3.html" >メニュー3</a></li>
<li><a href="menu4.html" >メニュー4</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;
}
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
すいません…改変css貼るの忘れてました…
@charset="EUC-JP";
#header{
position:relative;
x-index:100; /*ボックスが一番上の階層に表示される様に設定*/
width:100%; /*win IE6 対策*/
height:101px;
background:#ffffff;
}
#navigation{
position:absolute;
top:37px; /*プルダウンメニューのtopからの位置*/
left:206px; /*プルダウンメニューのleftからの位置*/
width:536px; /*プルダウンの全体の幅*/
}
#navigation ul{
margin:0;
padding:0;
list-style:none;
}
#navigation li{
float:left;
width:107px;
margin:0;
}
div#navigation li a{
display:block; /*これが無いと親メニューが表示されない*/
width:100%; /*IE6対策*/
padding:6px 0 8px 0;
text-align:center;
color:#d2691e;
text-decoration:none;
background-color:#4c924d;
}
div#navigation li a:hover{
background-color:#297e27;
}
#navigation ul ul{
background:#eeeeee;
display:none;
}
#navigation ul ul li{
float:none; /*親メニューをfloatして横並びにしているので
ここで解除して子メニューを通常の縦並びにする*/
position:relative;
background:#eeeeee;
}
#navigation ul ul li a{
border-top:1px solid #ffffff;
background:none;
font-size:90%;
font-weight:normal;
padding:6px 0;
}
#navigation ul ul li a:hover{
color:#ffffff;
background-color:#ec8602;
}
#navigation ul li:hover > ul{ /*CSSでプルダウンをする上でのキーコードがこの#navigation ul li:hover > ulです*/
background-image:none;
display:block; /*ここでblockする事により表示される*/
}
No.4
- 回答日時:
No.3
- 回答日時:
再度書き込み致します。
今丁度こう言うテンプレートサイト作ろうかと思ってて
丁度横並びプルダウンの簡素化ソース作ったので見てみて下さい。
私物ページで申し訳ないんですが&素人作成の為もう少し削れるcssもあるかも?
ちなみにページはJavaScriptをタグに直接コピーしてある。かつプルダウンが
増えれば同じのをコピペでOKという参考書の丸映し仕様…
参考サイトページのCSSです。
@charset="EUC-JP";
#header{
position:relative;
z-index:100; /*ボックスが一番上の階層に表示される様に設定*/
width:100%; /*win IE6 対策*/
height:101px;
background:#ffffff;
}
#navigation{
position:absolute; /*これでプルダウンメニュ―が単独(全部)で場所移動出来る*/
top:37px; /*プルダウンメニューのtopからの位置*/
left:206px; /*プルダウンメニューのleftからの位置*/
width:536px; /*プルダウンの全体の幅*/
}
#navigation ul{
margin:0;
padding:0;
list-style:none;
}
#navigation li{
float:left; /*これで親プルダウンを横にしている*/
width:107px;
margin:0;
}
div#navigation li a{
display:block; /*これで表示するようにしている(ブロック化)*/
width:100%; /*IE6対策*/
padding:6px 0 8px 0;
text-align:center;
color:#d2691e;
text-decoration:none;
background-color:#4c924d;
}
div#navigation li a:hover{
background-color:#297e27;
}
#navigation ul ul{
background:#eeeeee;
}
#navigation ul ul li{
float:none; /*親メニューをfloatして横並びにしているので
ここで解除して子メニューを通常の縦並びにする*/
}
#navigation ul ul li a{
border-top:1px solid #ffffff;
background:none;
font-size:90%;
font-weight:normal;
padding:6px 0;
}
#navigation ul ul li a:hover{
color:#ffffff;
background-image:none;
background-color:#ec8602;
}
#navigation ul li.parent ul{
display:none; /*これが非表示命令*/
}
#navigation ul li.parentOn ul{
display:block; /*これが表示命令*/
}
色々要点はすでに書いてあるので理解してみて下さい。
オールCSSだけで表現したいのでしょうか…
何となくあんまりにていたので一緒かと思った物で・・・
参考URL:http://sky.geocities.jp/abakavu/sample/pds1.html
No.2
- 回答日時:
ul.menu li ul{
内の
position: absolute;
top: 165px;
left: 210px;
を理解されていないようです。外してみて、表示させてみてください。
次に
position: absolute;/*これだとbodyの基点からの距離*/
position:relative;/*これだと本来ある筈の場所からの距離*/
を選び、
top: -20px;/*ここで位置の調整をします。マイナスの値もいれられます。*/
left: -20px;/*ここで位置の調整をします。マイナスの値もいれられます。*/
>縦並びのサブメニューの枠線が重なってくれません。
の意味がわからなかったので、外していたらごめんなさい。
No.1
- 回答日時:
趣味でWEBページ作ってる者です。
まずcssの下から4つめのli:hoverは無かったような…付けるならa要素のみだったと思います。
これ消すだけでも表示が変わると思います。
ちなみにプルダウンメニューとしてしっかりしていて、そのメニューの出方だけが問題ありってことですか?
そういう風にとれる質問だったので…
ul.menu li ul{
display: none; ←下のdisplay:block;とdisplay:none;が喧嘩してそうです。
position: absolute; でも上手く表示されてるなら問題は無い(無くもないですが)
top: 165px; ←このtopと下のleftでプルダウンメニューの表示位置を指定しているので、
left: 210px; ここら辺で微調整してみて下さい
list-style-type : none;
background-image: none;
}
ul.menu li:hover ul{ ←上記で述べたものですこれだと恐らくli:hoverが認識されていない↑
display: block;
}
上記の解説ですが、ブロックレベル要素(ulのみがブロックレベル要素)これをposition:absolute;において
その要素からの距離をtopとleftで指示してそのプルダウンメニューを表示させる位置が決められます。
って事で大丈夫ですか?
ちなみにli:hoverですが認識してないので上と下のCSSは同一扱いだと思います。
その際position:absolute;とnone;がどちらが採用されているかが良くわかりません。(表示による)
あとdisplay:block;とnone;はli aとli a:hoverに対してのみの設定で普通に機能すると思います。
li a{display:block;}
li a:hover{display:none;}
こんな感じで良いと思います。
あとはみ出して合わない場合は
overflow;hidden;(ブロック要素からのはみだし禁止)
overflow:visible;(ブロック要素からのはみだしさせる:デフォルト)
これを使うとはみ出して変に重なりあったりするのを制御出来ます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
隙間をなくすには?
-
ulとliで囲った文字の一部を変...
-
jQuery-もっと見るボタンをスマ...
-
フレームページのドロップダウ...
-
番号付きリスト(<Ol><Li>・・...
-
ナビゲーションバーを端まで伸...
-
CSSでこんな感じにしたい
-
画像にリンクを張ると画像がず...
-
リスト(ul / li)タグの左イン...
-
アンカーにクラスを適用しての...
-
inline-blockでliが横並びにな...
-
テーブルを使わない段組みで
-
<ul>~</ul>が二つ続くと間に改...
-
CSSの「a」と「a:link」の違い...
-
HTMLタグ リストの入れ子とNet...
-
HTML5のfooterに見出しを付けて...
-
Macで画像の切り抜きできないの?
-
【ヒトの神秘】美男美女から何...
-
ウインドウを小さくするとbody...
-
htmlの文字が縦書きになる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報