html - 将子菜单定位在父列表项的正下方

Question

在过去的三天里，我一直在尝试配置它……我已经查找了很多方法来做到这一点，我相信我现在是我最接近的。

我的主要问题是，当鼠标悬停时，我似乎无法从子菜单中获取列表项以垂直放置在其父项(The Guest Collection)下方。

我的第二个问题是，每当我将鼠标悬停在导航栏上的任何列表项上时，它就会变得困惑(固定导航栏？)

在 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*/

我已经上过一些网页设计类(class)，但我对所有事情还是很陌生...如果这是一个愚蠢的问题，请放轻松...

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(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>