html/css 上部のメニューバーを浮いた形でなくこのteratailのメニューバーみたいにしたい

###やってみたいこと

HTML/CSS初心者です。ウェブページのサンプルを作っているのですが、一番上に表示するメニューバー(aquamarine)が、上の写真の様になってしまうのですが、そうではなくてページ上部が完全にaquamarineになる様に、別の言い方だと神社の鳥居みたいに（例え方が下手くそすぎて申し訳ありません）、「円」から短い縦棒取り除いたみたい（再度申し訳ありません）（伝わったでしょうか…？）にしたいです。

###該当コード

HTML
1<body>
2    <div>
3    <ul id='nav'>
4        <li><a href='***_main.html'>ホーム</a></li>
5        <li><a href='***'>***</a></li>
6        <li><a href='***'>More</a></li>
7    </ul>
8    </div>
9</body>

CSS
1    <style>
2    #nav {
3        list-style: none;
4        position: fixed;
5        overflow: hidden;
6    }
7    #nav li {
8        width: 250px;
9        background-color: aquamarine;
10        float: left;
11        text-align: center;
12        height: 60px;
13        padding: 6px;
14        padding-top: 50px;
15    }
16    #nav li a {
17        text-decoration: none;
18        color: black;
19        border-bottom: solid 1px black;
20    }
21    </style>

###やってみたこと
nav liのheightを色々調整してみたのですが、下に伸びるだけで上に伸びてくれません。調べようともしたのですが上の通り語彙が足りずうまく必要な情報に辿り着けませんでした。素人質問で恐縮ですが、お力添え頂ける箇所がございましたら、宜しくお願い申し上げます。

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

回答2件

ベストアンサー

HTML5で追加されたheader、main、footer 等のタグを使うようにしましょう。

header,footer,main,nav,article,aside,sectionの効果的な使い方

html
1<header>
2  <ul id='nav'>
3    <li><a href='***_main.html'>ホーム</a></li>
4    <li><a href='***'>***</a></li>
5    <li><a href='***'>More</a></li>
6  </ul>
7</header>
8<main>
9
10</main>
11<footer>
12
13</footer>

ブラウザのデフォルトの余白等をリセットしましょう。
（reset.css を使う方法もあります。調べてみてください。）

headerを上部に固定して画面全体に広げたいのなら、headerにその設定をしましょう。
width: 100%; position: fixed; など。

横並びさせるのに float: left;を使うのはいろいろ弊害があるのでやめましょう。
今は Flexboxを使うのが主流です。

もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

上記の方針で設計したCSSの一例

css
1* { /* とりあえず余白リセット */
2  margin:0;
3  padding:0;
4}
5header {
6  width: 100%;
7  height: 120px;
8  background-color: aquamarine;
9  position: fixed;
10}
11#nav {
12  width: 1000px;
13  max-width: 100%;
14  margin: 0 auto;
15  height: 120px;
16  list-style: none;
17  overflow: hidden;
18  display: flex;
19  justify-content: space-between;
20  align-items: center;
21}
22#nav li {
23  width: 250px;
24  text-align: center;
25  padding: 6px;
26}
27#nav li a {
28  text-decoration: none;
29  color: black;
30  border-bottom: solid 1px black;
31}