サブメニューを中心としたCSSメニュー

Question

サブメニュー付きの中央に配置されたCSSメニューが必要です。私はそれ（メインメニュー）の一部をすることができますが、私はサブメニューを表示する上で問題があります。私は彼らのサブメニューを表示するには、メインメニューの項目を合わせると、問題が開始されます...

* { 
 
    font-family:arial; 
 
} 
 

 
#menu { 
 
    height: 65px; 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 15px 
 
} 
 

 
#menu ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline; 
 
} 
 

 
#menu ul li a { 
 
    padding: 4px 10px 6px 10px; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    color: #666; 
 
    transition: all 0.3s; 
 
} 
 

 
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { 
 
    background: #58c071; 
 
    color: white; 
 
} 
 

 
.submenu { 
 
    display:none; 
 
    position:absolute; 
 
    top: 5px; 
 
    width: 200px; 
 
    background:white; 
 
} 
 

 
#menu li:hover > ul { 
 
    display: block 
 
}

<div id="menu" class="text-center"> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Product 1</a></li> 
 
     <li><a href="">Product 2</a></li> 
 
     <li><a href="">Product 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>

https://jsfiddle.net/e8wyp6et/1/

あなたはどんな考えを持っていますか？

Answer 1

追加最も近い親およびleft: 0; .submenuセレクター：

ご質問のある方は、#menu ulに追加して、それに関連するサブメニューを配置してください。

#menu ul li { 
    position: relative; 
} 

と

.submenu { 
    display:none; 
    position:absolute; 
    top: 5px; 
    left: 0; /*this is needed to tell the submenu to align to the left of li*/ 
    width: 200px; 
    background:white; 
} 

https://jsfiddle.net/Kyle_/e8wyp6et/2/

Answer 2

これを試してみてください：

.submenuが.submenu#menu ul li > .submenuしてulあなたのターゲットのためのCSSを取得し、あなたがサブメニューの上position: relative;を持っている必要がposition:relativeからli

* { 
 
    font-family:arial; 
 
} 
 

 
#menu { height: 65px; 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 15px 
 
} 
 

 
#menu ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline; 
 
    position: relative; 
 
} 
 

 
#menu ul li a { 
 
    padding: 4px 10px 6px 10px; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    color: #666; 
 
    transition: all 0.3s; 
 
} 
 

 
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { 
 
    background: #58c071; 
 
    color: white; 
 
} 
 

 
#menu ul li > .submenu { 
 
    display:none; 
 
    position:absolute; 
 
    top: 24px; 
 
    width: 200px; 
 
    background:white; 
 
    left:0; 
 
} 
 

 
#menu li:hover > ul { 
 
    display: block 
 
}

<div id="menu" class="text-center"> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Product 1</a></li> 
 
     <li><a href="">Product 2</a></li> 
 
     <li><a href="">Product 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>

Answer 3

position: relativeliになくul

Updated code

Answer 4

にあなたのsubmenu propertを与えますここではdisplay: inlineが問題を引き起こしています。あなたのサブメニューの `;絶対：

* { 
 
    font-family:arial; 
 
} 
 

 
#menu { 
 
    height: 65px; 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 15px 
 
} 
 

 
#menu ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
#menu ul li a { 
 
    padding: 4px 30px 6px 30px; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    color: #666; 
 
    transition: all 0.3s; 
 
} 
 

 
.submenu li a { 
 
    padding: 10px 0 !important; 
 
} 
 

 
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { 
 
    background: #58c071; 
 
    color: white; 
 
} 
 

 
.submenu { 
 
    display:none; 
 
    width: 120px; 
 
    background: white; 
 
} 
 

 
#menu li:hover > ul { 
 
    display: block 
 
}

<div id="menu" class="text-center"> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Product 1</a></li> 
 
     <li><a href="">Product 2</a></li> 
 
     <li><a href="">Product 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>