縦並びメニューの枠線が重ならない

質問

いつもこちらではお世話になり、ありがとうございます。

ｃｓｓの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;
}

よろしくお願いします。

回答No.5

abacabu · ベストアンサー

すいません…改変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

abacabu

度々失礼。
ALLCSSでやるならこのサイトがお勧めです。
簡潔かつ解り易いです。

参考URL：

http://ezorisu-web.com/web-design/archives/356

回答No.3

abacabu

再度書き込み致します。
今丁度こう言うテンプレートサイト作ろうかと思ってて
丁度横並びプルダウンの簡素化ソース作ったので見てみて下さい。
私物ページで申し訳ないんですが＆素人作成の為もう少し削れる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

DrFell

ul.menu li ul{
内の
position: absolute;
top: 165px;
left: 210px;
を理解されていないようです。外してみて、表示させてみてください。

次に

position: absolute;/*これだとbodyの基点からの距離*/
position:relative;/*これだと本来ある筈の場所からの距離*/
を選び、
top: -20px;/*ここで位置の調整をします。マイナスの値もいれられます。*/
left: -20px;/*ここで位置の調整をします。マイナスの値もいれられます。*/

>縦並びのサブメニューの枠線が重なってくれません。
の意味がわからなかったので、外していたらごめんなさい。

回答No.1

abacabu

趣味でＷＥＢページ作ってる者です。
まずｃｓｓの下から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ですが認識してないので上と下のＣＳＳは同一扱いだと思います。
その際position:absolute;とnone;がどちらが採用されているかが良くわかりません。（表示による）
あとdisplay:block;とnone;はli aとli a:hoverに対してのみの設定で普通に機能すると思います。
li a{display:block;}
li a:hover{display:none;}
こんな感じで良いと思います。
あとはみ出して合わない場合は
overflow;hidden;（ブロック要素からのはみだし禁止）
overflow:visible;(ブロック要素からのはみだしさせる：デフォルト)
これを使うとはみ出して変に重なりあったりするのを制御出来ます。