ヘッダードロップメニューを横並びに表示させたい

前提・実現したいこと

添付画像・記述のコードのドロップメニューヘッダーを、ホバーしたら下に伸びるのではなく
横1列に伸びるようにしたいです。

発生している問題

私自身、ＨＴＭＬ・ＣＳＳがかなり初心者です。ネットショップ担当になり前任が作成した
このメニューを横一列に変更したいのですが、いろいろと調べてｃｓｓをいじっても、
全然解決に至らないため、恥ずかしながら質問をさせていただきます。

初歩も初歩、こちらで質問するのも憚られるのですが、
他の業務をしながらとはいえ1か月ほど調べてもお手上げ状態で・・・・
皆様もお忙しいこととは存じますがご教授いただけましたら幸いです。

該当のソースコード

<style>
/*------------------------------------
ドロップダウンメニュー
---------------------------------------*/
.dropmenu{
  *zoom: 1;
  list-style-type: none;
  width: 980px;
  height:45px;
  margin: 5px auto 30px;
  padding: 0;
}
.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}s
.dropmenu:after{
  clear: both;
}
.dropmenu li{
  position: relative;
  width: 14%;
  float: left;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 15px;
  background: #000000;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  display:inline-block;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  width: 100%;

}
.dropmenu li ul li a{
  padding: 13px 1px;
  border-top: 1px solid #FFFFFF;
  background:#444444;
  text-align: center;
  opacity:0.9;
  line-height:1.5;
 }
/*ホバー時各カテゴリ色指定*/
.dropmenu .lay li a:hover{
  background: #c62b35;
}
.dropmenu .men li a:hover{
  background: #2c3ac7;
}
.dropmenu .girl li a:hover{
  background: #d337b4;
}
.dropmenu .boy li a:hover{
  background: #1d9692;
}
.dropmenu .leg li a:hover{
  background: #5e1922;
}
.dropmenu .tights li a:hover{
  background: #5e1922;
}
.dropmenu .time li a:hover{
  background: #dda40c;
  height:15px;
}

#globalnavi {
	width: 100%;
	height: 45px;
	background: #000000;
}
/*メニュー降り方スタイル*/
#normal li ul{
  display: none;
}
#normal li:hover ul{
  display: inline-block;
}

</style>
<!DOCTYPE html>
<body>



	<!--ドロップダウンメニュー-->
<div id="globalnavi">
<ul id="normal">
<div class="dropmenu">
<div class="men">
 <li><a href="">カテゴリ1</a>
    <ul>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href=""><span class="minimoji">more>></span></a></li>
    </ul>
  </li>

</div>
  <div class="lay">
  <li><a href="/">カテゴリ2</a>
    <ul>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href=""><span class="minimoji">more>>>></span></a></li>
    </ul>
  </li>
</div>
<div class="girl">
  <li><a href="">カテゴリ3</a>
    <ul>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href=""><span class="minimoji">more>>>></span></a></li>
    </ul>
  </li>
</div>  
<div class="boy">
  <li><a href="">カテゴリ4</a>
    <ul>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href=""><span class="minimoji">more>>>></span></a></li>
    </ul>
  </li>
</div>
<div class="leg">
  <li><a href="">カテゴリ5</a>
    <ul>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
    </ul>
  </li>
</div>
<div class="tights">
  <li><a href="">カテゴリ6</a>
    <ul>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
    </ul>
  </li>
</div>
<div class="time">
    <li><a href="">カテゴリ7</a>
  </li>
</div>
</div>
</ul>
</div>
</body>
</html>

namda

2018/08/03 08:33

ソースコードは改行``` ソースコード ```改行と言う感じで ``` で囲んでください

Manatsuoj

2018/08/03 08:45

ご指摘ありがとうございます！先ほど修正いたしました。

行動規範の内容に同意します

回答2件

書いていただいたコードにいくつか間違いがあるみたいです。

まずHTMLでは「ul」の中に「div」を入れることはできません。（「ul」の中に入るのは「li」だけ）
「more」の横にある右矢印はタグのカッコと被るので「>」を使います。

一応コードを書いてみました。業務で使えるほどのものではないので、1つのサンプルとして見ていただければと思います。いくつかご連絡事項を書かせていただきます。

cssはリセットされていることが前提です。
「.dropmenu li」としますと、「.dropmenu li ul li」まで同じようにスタイルが適用されてしまうので、「.dropmenu > li」（dropmenuの直下のliという意味）と書くのが良いと思います。
極力無駄を省きましたので、適宜スタイルを追加してください。

html
1<div id="globalnavi">
2  <ul class="dropmenu">
3    <li class="men"><a href="">カテゴリ1</a>
4      <ul>
5        <li><a href="">子カテゴリ</a></li>
6        <li><a href="">子カテゴリ</a></li>
7        <li><a href="">子カテゴリ</a></li>
8        <li><a href="">子カテゴリ</a></li>
9        <li><a href="">子カテゴリ</a></li>
10        <li><a href="">子カテゴリ</a></li>
11        <li><a href=""><span class="minimoji">more&gt;&gt;</span></a></li>
12      </ul>
13    </li>
14    <li class="lay"><a href="">カテゴリ2</a>
15      <ul>
16        <li><a href="">子カテゴリ</a></li>
17        <li><a href="">子カテゴリ</a></li>
18        <li><a href="">子カテゴリ</a></li>
19        <li><a href="">子カテゴリ</a></li>
20        <li><a href="">子カテゴリ</a></li>
21        <li><a href="">子カテゴリ</a></li>
22        <li><a href=""><span class="minimoji">more&gt;&gt;&gt;&gt;</span></a></li>
23      </ul>
24    </li>
25    <li class="girl"><a href="">カテゴリ3</a>
26      <ul>
27        <li><a href="">子カテゴリ</a></li>
28        <li><a href="">子カテゴリ</a></li>
29        <li><a href="">子カテゴリ</a></li>
30        <li><a href="">子カテゴリ</a></li>
31        <li><a href=""><span class="minimoji">more&gt;&gt;&gt;&gt;</span></a></li>
32      </ul>
33    </li>
34    <li class="boy"><a href="">カテゴリ4</a>
35      <ul>
36        <li><a href="">子カテゴリ</a></li>
37        <li><a href="">子カテゴリ</a></li>
38        <li><a href="">子カテゴリ</a></li>
39        <li><a href="">子カテゴリ</a></li>
40        <li><a href=""><span class="minimoji">more&gt;&gt;&gt;&gt;</span></a></li>
41      </ul>
42    </li>
43    <li class="leg"><a href="">カテゴリ5</a>
44      <ul>
45        <li><a href="">子カテゴリ</a></li>
46        <li><a href="">子カテゴリ</a></li>
47        <li><a href="">子カテゴリ</a></li>
48        <li><a href="">子カテゴリ</a></li>
49      </ul>
50    </li>
51    <li class="tights"><a href="">カテゴリ6</a>
52      <ul>
53        <li><a href="">子カテゴリ</a></li>
54        <li><a href="">子カテゴリ</a></li>
55        <li><a href="">子カテゴリ</a></li>
56      </ul>
57    </li>
58    <li class="time"><a href="">カテゴリ7</a></li>
59  </ul>
60</div>

css
1#globalnavi {
2  background-color: #000;
3}
4
5.dropmenu {
6  position: relative;
7  display: flex;
8  flex-wrap: wrap;
9  width: 980px;
10  margin-right: auto; 
11  margin-left: auto;
12}
13.dropmenu a {
14  display: block;
15  padding: 15px 10px;
16  color: #fff;
17  text-align: center; 
18  text-decoration: none;
19  font-size: 13px;
20}
21.dropmenu > li {
22  width: calc(100% / 7);
23}
24.dropmenu > li:hover > ul {
25  display: flex;
26  flex-wrap: wrap;
27}
28.dropmenu > li > a {
29  background-color: #000;
30}
31.dropmenu > li > ul {
32  position: absolute;
33  top: 100%;
34  left: 0;
35  display: none;
36  width: 100%;
37}
38.dropmenu > li > ul > li {
39  width: calc(100% / 7);
40}
41.dropmenu > li > ul > li > a {
42  display: flex;
43  align-items: center;
44  justify-content: center;
45  height: 100%;
46  background-color: #444; 
47}
48.dropmenu > li > ul > li > a:hover {
49  background-color: #262626;
50}
51.dropmenu .men > a:hover { background-color: #2c3ac7; }
52.dropmenu .lay > a:hover { background-color: #c62b35; }
53.dropmenu .girl > a:hover { background-color: #d337b4; }
54.dropmenu .boy > a:hover { background-color: #1d9692; }
55.dropmenu .leg > a:hover { background-color: #5e1922; }
56.dropmenu .tights > a:hover { background-color: #5e1922; }
57.dropmenu .time > a:hover { background-color: #dda40c; }

投稿2018/08/03 11:44

編集2018/08/04 09:52

takopo

総合スコア484

Manatsuoj

2018/08/07 02:07

ご回答いただきありがとうございました！また修正コードもありがとうございます！どちらをベストアンサーにするかとても悩んだのですが、最初にコメントいただいた方をベストアンサーとさせていただきました。＞「.dropmenu > li」（dropmenuの直下のliという意味）と書くのが良いと思います。との事、このあたり勉強不足であると実感しています。何となくコードを書いたらなんかそれっぽくできた！・・・で今まで来たのですが、ちゃんと基礎からしっかり勉強したい！と思いました。この度は本当にありがとうございました！

行動規範の内容に同意します

ベストアンサー

質問者様が記載したコードを元に修正を加えました。
最後の方に動くサンプルを作成したのでご確認ください。

.list__itemが横にならない原因
親要素のliの幅がwidth14%となっておりその幅の中で子要素のulの幅が自動的に決まります。
それだとlist__itemにfloat: left;を指定しても横並びにすることができません。なぜならば横並びに出来るほどの幅が無いからです。

解決策

.dropmenuにposition: relative;を指定する。
liにhoverしたら.listにposition: absolute;指定します。そして横幅(980px)を指定します。
.list__itemにwidth: 14%;とfloat: left;を指定します。

動くサンプル

投稿2018/08/03 12:16

編集2018/08/04 12:47

退会済みユーザー

総合スコア0

Manatsuoj

2018/08/07 02:04

この度はご回答をありがとうございました！わかりやすい説明をいただいた上、ご丁寧にも修正後のコード、また動くサンプルまでご提示いただき、本当にありがとうございました！現在いただいたコードをもとにグローバルメニューを作成中です。そしてこんなにもすぐに回答をいただけると思わず、ありがたい限りでございますちゃんと勉強されている方はこんなにも早く解決ができるのですね・・・これを機に、イチからＣＳＳ、htmlを勉強しようと決意いたしました。

退会済みユーザー

2018/08/07 12:14

cssはBEM, ITCSS, FLOCSSなどの思想設計を学ぶのもおすすめです。 htmlはHTML5に準拠してタグを正しく使えば早く正確に実装できるようになります。頑張ってください！

行動規範の内容に同意します

あなたの回答