將子菜單定位在父列表項的正下方

Question

在過去的三天里，我一直在嘗試配置它……我已經找到了許多實現此目的的方法，我相信我現在是迄今為止最接近的方法。

我的主要問題是，當懸停在子菜單上時，似乎無法從子菜單中將列表項垂直放置在其父項（“來賓收藏”）下。

我的第二個問題是，每當我將鼠標懸停在導航欄上的任何列表項上時，它就會變成混亂（固定的導航欄？）。

在Google上搜索時，我發現了幾段使用“下拉按鈕”作為父級列表項的代碼……我在導航欄中使用了鏈接而不是按鈕。 這可能是個問題嗎？

如果可能，我希望將CSS保留在外部樣式表中。

的HTML

<div class = "h_menu">
<ul class = "menu">
<li><a href = "main_page.html">Home</a></li>
<li><a href = "orig_fig.html">Original Figurines</a></li>
<li><a href ="villages.html">Villages</a></li>
<li><a href ="guest_collect.html">The Guest Collection</a>
<ul class = sub_menu1>          
    <li><a href ="disney.html">Disney</a></li>
    <li><a href ="seuss.html">Dr. Seuss</a></li>
    <li><a href ="Rudolph.html">Rudolph and Friends</a></li>
    <li><a href ="santa.html">Santa</a></li>
    <li><a href ="oz.html">Wizard of Oz</a></li>
</ul>
</li>
<li><a href ="orna.html">Oranments</a></li>
<li><a href ="sno_bunn.html">Snow Bunnies</a></li>
</ul>
</div>

CSS（外部樣式表）

/*navbar*/

.h_menu {
display: table;
margin: 0 auto;}

.menu {
list-style-type: none;
margin: 0;
padding: 0
text-align: center;
display: block;
position: relative;}

.menu li {
display: inline-block;
margin-right: 10px;}

.menu a {
display: inline-block;
color: pink;
font-family: 'Homemade Apple', cursive;}

.menu li a:hover {
background: #DDDDEE;
border: 3px solid pink;
border-radius: 16px;
color: #B76E79; 
padding: 8px;
z-index: 1;}    



/*Drop Down Menu*/

.sub_menu1 {
display: none;} /*hide submenu content*/

.menu li:hover ul {
position: relative;
display: block; } /*position dropdown content*/

我上過一些網頁設計課程，但是我在所有方面都還算是新手。如果這是一個愚蠢的問題，請告訴我。

Answer 1

因此需要進行CSS更改。

CSS：

.sub_menu1 li {
  display: block;
}

.menu a {
  display: inline-block;
  color: pink;
  font-family: 'Homemade Apple', cursive;
  border: 3px solid transparent;
  padding: 8px;
}

.menu li:hover ul {
  position: absolute;
  display: block;
}

問題是。

當鼠標懸停在當由於a標簽沒有在尺寸變化a標簽，我對這個解決辦法是采用同樣的填充（ padding: 8px; ）和邊界（ border: 3px solid transparent; ）（但透明）到a標記為默認。

其次，當您將ul標記懸停在相對位置時，由於導航欄添加了新元素，因此會弄亂導航欄。 解決方案將只是將元素定位為absolute ，這將解決您的問題，如下面的代碼片段所示。

 /*navbar*/ .h_menu { display: table; margin: 0 auto; } .menu { list-style-type: none; margin: 0; padding: 0 text-align: center; display: block; position: relative; } .menu li { display: inline-block; margin-right: 10px; } .menu a { display: inline-block; color: pink; font-family: 'Homemade Apple', cursive; border: 3px solid transparent; padding: 8px; } .menu li a:hover { background: #DDDDEE; border: 3px solid pink; border-radius: 16px; color: #B76E79; padding: 8px; z-index: 1; } /*Drop Down Menu*/ .sub_menu1 { display: none; } .sub_menu1 li { display: block; } /*hide submenu content*/ .menu li:hover ul { position: absolute; display: block; } /*position dropdown content*/ 

 <div class="h_menu"> <ul class="menu"> <li><a href="main_page.html">Home</a></li> <li><a href="orig_fig.html">Original Figurines</a></li> <li><a href="villages.html">Villages</a></li> <li><a href="guest_collect.html">The Guest Collection</a> <ul class="sub_menu1"> <li><a href="disney.html">Disney</a></li> <li><a href="seuss.html">Dr. Seuss</a></li> <li><a href="Rudolph.html">Rudolph and Friends</a></li> <li><a href="santa.html">Santa</a></li> <li><a href="oz.html">Wizard of Oz</a></li> </ul> </li> <li><a href="orna.html">Oranments</a></li> <li><a href="sno_bunn.html">Snow Bunnies</a></li> </ul> </div> 

Answer 2

我不確定如何解決您的問題，但是我可以看到您在班級上缺少“” sub_menu1

Answer 3

單擊整頁查看所需內容。

我用inline-block以外的float重寫了代碼，沒關系，我只喜歡float。

產生此效果的關鍵是成功定位該子菜單。 這是>運算符。

第二個參數是您的子菜單項必須與您的頂部鏈接重疊，因為我們使用的是純CSS，所以只有我們有hover 。

 /*navbar*/ .clearfix:after { content: ''; display: table; clear: both; visibility: hidden; } .h-menu { margin: 0 auto; } ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } .menu { position: relative; } .menu li { float: left; } .menu a { display: block; color: pink; font-family: 'Homemade Apple', cursive; padding: 3px 15px; } .menu li:hover>a { background: #DDDDEE; border: 3px solid pink; border-radius: 16px; color: #B76E79; } .sub-menu { display: none; position: absolute; /* the number is crucial*/ top: 30px; left: 0; z-index: 1000; } /*show the submenu*/ .menu li:hover>.sub-menu { display: block; } /*keep the submenu*/ .sub-menu:hover { display: block; } @media (max-width: 800px) { .menu li { float: none; } .sub-menu { top: 24px } } 

 <!-- hyphen instead of _ for class name --> <nav class="h-menu"> <ul class="menu"> <li><a href="main_page.html">Home</a></li> <li><a href="orig_fig.html">Original Figurines</a></li> <li><a href="villages.html">Villages</a></li> <li><a href="guest_collect.html">The Guest Collection</a> <ul class="sub-menu clearfix"> <li><a href="disney.html">Disney</a></li> <li><a href="seuss.html">Dr. Seuss</a></li> <li><a href="Rudolph.html">Rudolph and Friends</a></li> <li><a href="santa.html">Santa</a></li> <li><a href="oz.html">Wizard of Oz</a></li> </ul> </li> <li><a href="orna.html">Oranments</a></li> <li><a href="sno_bunn.html">Snow Bunnies</a></li> </ul> </nav>