Last active
April 18, 2020 01:44
-
-
Save ashitaka1963/38353efbdc2f3d6152caaa8f30e1b0f4 to your computer and use it in GitHub Desktop.
グローバルナビゲーション
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#nav{ | |
background: #1F2123; /* ナビゲーションバー全体の背景色 */ | |
} | |
#globalmenu{ | |
width: 60%; /* ナビゲーションバークリック部分の背景色 */ | |
margin: 0 auto 40px; | |
height: 50px; /* 高さ */ | |
padding: 0; | |
list-style-type: none; /* リストのマーク非表示 */ | |
} | |
#globalmenu li{ | |
position: relative; | |
float: left; | |
text-align: center; | |
width: 25%; /* 各liの幅*/ | |
margin: 0; | |
padding: 0; | |
} | |
#globalmenu li a{ | |
display: block; | |
margin: 0; | |
padding: 17px 0 20px; | |
color: #fff; | |
font-size: 15px; | |
text-decoration: none; | |
} | |
#globalmenu li:hover > a{ | |
background: rgb(10,98,12); /* ホバー時の背景色 */ | |
color: #fff; /* ホバー時の文字色 */ | |
} | |
#globalmenu li ul{ | |
position: absolute; | |
top: 100%; | |
color: #fff; | |
left: 0; | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
z-index:10000; | |
width: 100%; | |
} | |
#globalmenu li ul li{ | |
overflow: hidden; | |
width: 100%; | |
height: 0; | |
color: #fff; | |
} | |
#globalmenu li ul li:hover > a{ | |
background: rgb(10,98,12); | |
color: #fff; | |
} | |
#globalmenu li:hover ul li{ | |
overflow: hidden; | |
height: 40px; | |
border-bottom: 1px dotted #ffffff; | |
} | |
#globalmenu li ul li a{ | |
font-size: 13px; | |
padding: 15px; | |
background: rgb(0, 0, 0); | |
text-align: left; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav id="nav" > | |
<ul id="globalmenu"> | |
<li><a href="#">CODE</a> | |
<ul> | |
<li><a href="https://ashitaka.hateblo.jp/archive/category/Python">Python</a></li> | |
<li><a href="https://ashitaka.hateblo.jp/archive/category/ JavaScript">JavaScript</a></li> | |
</ul> | |
</li> | |
<li><a href="#">LIFE</a> | |
<ul> | |
<li><a href="https://ashitaka.hateblo.jp/archive/category/Daily">Daily</a></li> | |
<li><a href="#">Monthly</a></li> | |
</ul> | |
</li> | |
<li><a href="#">準備中1</a> | |
<ul> | |
<li><a href="#">準備中</a></li> | |
</ul> | |
</li> | |
<li><a href="#">準備中2</a> | |
<ul> | |
<li><a href="#">準備中</a></li> | |
</ul> | |
</li> | |
</ul> | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment