dropダウンの文字が重なってしまう

Question

htmlに

<ul id="dropmenu">
  <li class="dropitem"><a href="#">名前</a>
    <ul>
       <li><a href="#">Tom</a></li>
       <li><a href="#">Juddy</a></li>
    </ul>
  </li>

  <li class="dropitem"><a href="#">住所</a>
    <ul>
       <li><a href="#">NY</a></li>
       <li><a href="#">London</a></li>
    </ul>
  </li>

  <li class="dropitem"><a href="#">職業</a>
    <ul>
       <li class="nextitem"><a href="#">ビジネスマン</a>
           <ul>
              <li><a href="#">金融</a></li>
              <li><a href="#">医療</a></li>
              <li><a href="#">製造</a></li>
           </ul>
       </li>
    </ul>
  </li>

</ul>

と書き、cssに

#dropmenu{
  position: relative;
  list-style-type: none;
  width: 1000px;
  height: 40px;
  margin:0;
  padding: 0;
}

#dropmenu li{
  width: 20%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.index{
  color: red;
}

#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li ul li{
  overflow: hidden;
  width: 1000px;
  height: 0;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover > a{
  color: blue;
  Background-color:yellow;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li:hover{
  height:auto !important;
}
#dropmenu li:hover > ul > li{
  overflow: visible;
  height: 38px;
}

.nextitem  {
  position: relative;
}

.dropitem  ul li ul li {
  position: absolute;
  left: 100%;
  width: 100%;
  top: 0;
}

.dropitem {
  position: relative;
}
.dropitem > ul {
  position: absolute;
  left: 100%;
  top: 0;
}

と書きました。
これらを実行すると、
職業・ビジネスマン　の文字にhoverした後、
金融＆医療＆製造の文字が重なってしまいます。

色々と試行錯誤しましたが、金融＆医療＆製造の文字を縦に並べることができず。。。

どうcssに追加すればいいでしょうか？

回答を受けて

<ul id="dropmenu">
  <li class="dropitem"><a href="#">名前</a>
    <ul>
       <li><a href="#">Tom</a></li>
       <li><a href="#">Juddy</a></li>
    </ul>
  </li>

  <li class="dropitem"><a href="#">住所</a>
    <ul>
       <li><a href="#">NY</a></li>
       <li><a href="#">London</a></li>
    </ul>
  </li>

  <li class="dropitem"><a href="#">職業</a>
    <ul>
       <li class="nextitem"><a href="#">ビジネスマン</a>
           <ul>
              <li><a href="#">金融</a></li>
              <li><a href="#">医療</a></li>
              <li><a href="#">製造</a></li>
           </ul>
       </li>
       <li class="nextitem"><a href="#">その他</a>
           <ul>
              <li><a href="#">主婦</a></li>
              <li><a href="#">フリーター</a></li>
              <li><a href="#">その他</a></li>
           </ul>
       </li>
    </ul>
  </li>

</ul>

とhtmlに書き、

#dropmenu{
  position: relative;
  list-style-type: none;
  width: 1000px;
  height: 40px;
  margin:0;
  padding: 0;
}

#dropmenu li{
  width: 20%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.index{
  color: red;
}

#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li ul li{
  overflow: hidden;
  width: 1000px;
  height: 0;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover > a{
  color: blue;
  Background-color:yellow;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li:hover{
  height:auto !important;
}
#dropmenu li:hover > ul > li{
  overflow: visible;
  height: 38px;
}


.dropitem {
  position: relative;
}
.dropitem > ul {
  position: absolute;
  left: 100%;
  top: 0;
}

.nextitem  {
  position: relative;
}

.dropitem  ul li ul li {
  position: relative;
  left: 100%;
  width: 100%;
  top: -38px;
}

とcssに書くとその他の要素の中の、主婦・フリーター・その他の要素が一切押せなくなってしまいました。

Comments

[m.ts10806]

hoverで横スクロールが出てくるのがすごく気になるのですが、この辺りが関係しそうに思うのですが、いかがでしょうか。

[kaitotokai]

hoverでは横に出てくるようにしたいです。そのようにして、文字が重ならないようにするにはどうしたらいいでしょうか・・・？

Answer 1

私の方では「ビジネスマン」がwidth:1000pxとなっていて見づらいので
widthを150pxくらいにして調整しました。

absoluteだと絶対位置になってしまうので1箇所に集まってしまいます。
relativeにすることで相対位置に並びます。

.dropitem  ul li ul li {
  position: relative;
  left: 100%;
  width: 100%;
  top: 0;
}

ただ、これだと1段ずれるので、topをマイナスにして調整します。

.dropitem  ul li ul li {
  position: relative;
  left: 100%;
  width: 100%;
  top: -38px;
}

もう少しスマートにできそうな気もしますが（38pxとか不確定かもしれませんし・・）
ひとまず。

Comments

[kaitotokai]

ありがとうございます。職業の要素を増やすと増やした要素が押せなくなってしまい・・・。質問文に追記しました。

[kaitotokai]

もしご存知でしたらお願いいたします

[m.ts10806]

んーまあ、「職業」から斜め移動すれば増やした要素も出せるには出せますが、
トリガーをhoverでやってる以上「選択しにくくなる」のは仕方がないところかと思います。

[m.ts10806]

通常、孫要素まで出そうと思うとhoverではUI的に動作保証が難しくなるので、clickでJavaScriptで制御することの方が多いです。

[kaitotokai]

そうですか・・・。https://www.webdlab.com/labs/dropdownmenu-3/sample3/　のように作りたかったのですが、厳しいですかね？hoverし終わったら戻すようにすればいいのでしょうか？

[m.ts10806]

その参考先のCSSそのまま使ってしまってもいいと思いますが、、

[m.ts10806]

いずれにしても孫要素が出てくるとその下の同列要素が下がってしまうところが問題なので、そちらは解消しないといけませんね。1pxも隙間無くくっつける必要があります。
おそらくその辺りCSSだけの制御が難しいから参考サイトでは孫要素は下の序列の要素にしかつけてないのかなと。

[kaitotokai]

ありがとうございます。やってみます！

[m.ts10806]

やはりJavaScriptにてonclickなどで制御した方が思ったとおりの動きをより簡単に実装できそうに思いますので、今後の検討としてください。