Code Pen で CSS ナビゲーション バーを完成させたと思っていましたが、実際のレイアウトに実装すると、レイアウト内の他の div がドロップダウンを妨げているようです (ドロップダウンが表示されますが、マウスを動かして選択するとドロップダウンが消えます)。
ここにコードペンがあります: http://codepen.io/anon/pen/cKJlu
そして、ここでそれは私のサイトに実装されています: http://www.onedirectionconnection.com/tester
CSS は次のとおりです。
.main-navigation {
clear: both;
display: block;
width: 90%;
margin: 0 auto 20px auto;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: left;
position: relative;
margin-right: 15px;
}
.main-navigation li:last-of-type{
margin-right:0;
}
.main-navigation a {
text-align: center;
font-size: 14px;
text-transform: uppercase;
display: block;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
background-color: #269BA9;
width: 130px;
color: #fff;
}
.main-navigation ul ul {
display: none;
float: left;
position: absolute;
top: 1.5em;
left: 0;
z-index: 99999;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
margin-top: 3px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
background-color: #DA5969;
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}
/* Small menu */
.menu-toggle {
display: none;
cursor: pointer;
}
問題が何であるかを理解するのを手伝ってくれる人がいれば、大歓迎です。