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

我参加了一些关于网页设计的课程，但我对所有内容都还是比较新的...如果这是一个愚蠢的问题，请对我很轻松......

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;）和边框（{ {1}}）（但透明）默认为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*/

Answer 2

我不确定如何解决您的问题，但我可以看到您在课堂上缺少“”sub_menu1

Answer 3

点击整页查看您想要的内容。

我使用浮动而不是内联块重写你的代码，没关系，我只是喜欢浮动。

实现此效果的关键是成功定位子菜单。这是>运算符。

第二个pard是你的子菜单项必须与顶部链接重叠，因为我们使用的是纯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>

将子菜单直接定位在父列表项下

3 个答案: