はてなブログのデザイン（HTML,CSS）の変更

まず現在こういった感じです。

html
1<div class="nav">
2  <ul id="menubar">
3    <li class="header-menu">
4      <div class="">
5        <a href="https://china-tushin.hatenablog.com/">HOME</a>
6      </div>
7    </li>
8    <li class="header-menu">
9      <div class="#">
10        <a href="https://china-tushin.hatenablog.com/entry/2019/09/17/144040?_ga=2.55572520.243847996.1590528723-1653182463.1583222178">ABOUT</a>
11      </div>
12    </li>
13    <li class="header-menu">
14      <div class="#">
15        <a href="#">#</a>
16      </div>
17    </li>
18    <li class="header-menu">
19      <div class="drop-down">CATEGORY<span class="#">&#9662;</span></div>
20      <ul class="#">
21        <li><a href="#">TRAVEL</a></li>
22        <li><a href="#">STUDY</a></li>
23        <li><a href="#">CULTURE</a></li>
24        <li><a href="#">OTHERS</a></li>
25      </ul>
26    </li>
27    <li class="header-menu">
28      <div class="#">CONTACT<span class="#">&#9662;</span></div>
29      <ul class="#">
30        <li><a href="https://china-tushin.hatenablog.com/about">ABOUT US</a></li>
31        <li><a href="#">CONTACT US</a></li>
32        <li><a href="#">OTHERS</a></li>
33      </ul>
34    </li>
35  </ul>
36</div>

css
1/* <system section="theme" selected="kanahei"> */
2@import "/css/theme/kanahei/kanahei.css";
3/* </system> */
4
5/* <system section="background" selected="custom"> */
6body{ background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/C/China-tushin/20200601/20200601032215.jpg'); background-repeat: repeat; background-color:transparent; background-attachment: fixed; background-position: left top;}
7/* </system> */
8#menubar{
9  width: 100%;
10  margin: 0 auto 40px;
11  height: 50px;
12  padding: 0;
13  list-style-type: none;
14  background: #fff;
15  border-top: 1px solid #000;  
16  border-bottom: 1px solid #000;
17}
18
19#menubar ul{
20 display:table;
21 width:100%;
22 margin: 20; 
23 padding: 0;
24 background-color: #000;
25}
26
27#menubar li{
28  display: table-cell;
29  position: relative;
30  float: left;
31  text-align: left;
32  width: 20%;
33  margin: 0;
34  padding: 0;
35  background-color: #203556;
36  }
37  
38#menubar li a{
39  display: block;
40  margin: 0 auto;
41  padding: 5px;
42  color: #000;
43  font-size: 15px;
44  text-decoration: none;
45  border: 1px solid #FFFFFF;
46  color: #FFFFFF;
47  text-align: center;
48  font-size: 18px;
49  }  
50  
51#menubar li div{
52  display: block;
53  margin: 0 auto;
54  padding: 5px 5px 10px 5px;
55  color: #000;
56  font-size: 15px;
57  text-decoration: none;
58  border: 1px solid #FFFFFF;
59  color: #FFFFFF;
60  text-align: center;
61  font-size: 18px; }
62
63#menubar li :hover > a {
64 background-color: #406BAC;
65}
66 
67#menubar li ul {
68  position: absolute;
69  top: 100%;
70  color: #fff;
71  left: 0;
72  margin: 0;
73  padding: 0;
74  list-style: none;
75  z-index:10000;
76}
77
78#menubar li ul li {
79  overflow: hidden;
80  width: 100%;
81  height: 0;
82  color: #fff;
83}
84
85#menubar li ul li:hover > a{
86  background: #EDA47C;
87  color: #fff;
88}
89
90#menubar li:hover ul li{
91  overflow: hidden;
92  height:40px;
93  border-bottom: 1px dotted #ffffff;
94}
95
96#menubar li ul li a{
97  font-size: 13px;
98  padding: 15px;
99  background: #000;
100  text-align: center;
101  font-size: 18px;
102}
103
104h2#announce{
105color: #FFFFFF;
106text-align: center;
107background-color: #406BAC;
108}

変更したい点
・ドロップダウンではないブロック（Homeなど）の白枠を消したい
・ドロップダウンのボックス（Categoryなど）の下側をHomeなどにそろえたい

ピクセルなどをいじったのですが、下の白い部分が伸びたりと不都合が多くお聞きすることにしました。

どこをどう変えればよいかお教え願います。
よろしくお願いいたします。

Lhankor_Mhy

2020/06/03 03:40

HTMLを変更してもいいのですか？ 2つのドロップダウンメニューのHTMLが異なるので、CSSだけで解決するのがきついです。

退会済みユーザー

2020/06/03 04:32

変えていただいても結構です。ただ構造だけは同じでお願いしたいのですができますか？

Lhankor_Mhy

2020/06/03 04:45

それですと、文字の垂直位置が合わないかと思いますが、構いませんか？

退会済みユーザー

2020/06/03 04:59

申し訳ございません。解せないのでもう少し詳しく教えていただけませんか？

Lhankor_Mhy

2020/06/03 05:04

.header-menu > div > a のテキストと .header-menu > div とのテキストの高さを合わせなくてはいけないので…… まあ、やってみますか……

退会済みユーザー

2020/06/03 05:09

なるほど！理解いたしました。ほかにもっと良い方法や楽な方法があるのであれば変えていただいて結構です。知識不足で大変申し訳ございませんよろしくお願いします

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

回答1件

ベストアンサー

ドロップダウンではないブロック（Homeなど）の白枠を消したい

ボーダーを消せばいいかと思います。

css
1#menubar div>a {
2	border: none;
3}

ドロップダウンのボックス（Categoryなど）の下側をHomeなどにそろえたい

height: autoになっているのが原因かと。

css
1#menubar li {
2	height: 100%;
3}
4#menubar li div {
5	height: 100%;
6	box-sizing: border-box;
7}
8#menubar li div span {
9	vertical-align: bottom;
10}