个人中心
gpt4 book ai didi

html - 子菜单项不断移动...如何使它们固定？

转载 作者：行者123 更新时间：2023-11-28 02:51:24 25 4
gpt4 key购买 nike

好的，我们再来一次......

当我将鼠标悬停在它们上方时，子菜单中的元素会不断移动。我似乎无法在这个问题上找到任何东西。我之前为我的导航栏问过这个问题，但我收到的答案 - (对 a 标签使用相同的填充并在它们周围放置边框 - 但让它透明)不适用于子菜单。我也尝试过填充，但没有运气。

另一件事...(对于所有问题我深表歉意，我只是讨厌在这里提问......有些人可能居高临下)我已经为导航栏的每个元素(或列表项)分配了一个类，因为当我试图在它们周围放置边框，每个子菜单元素也继承了边框。这是一种“更清洁”的方法吗？我尝试了 :not() 标签，但我似乎也无法让它工作。

最后，作为最后的选择，我会在此站点上提问。我是一名新手程序员/网页设计师，正在寻求网络，并希望在我被禁止提出其他人认为无用的问题之前与更有经验的人联系。如果最后一个请求违反服务条款，请告诉我 - 我会删除它。

HTML

/* Style The Dropdown Button */
.dropbtn {
background-color: transparent;
font-family: 'Homemade Apple',cursive;
color: pink;
padding: 4px;
font-size: 16px;
cursor: pointer;
border: 3px solid pink;
border-radius: 16px;}




.dropdown {
position: relative;
display: inline-block;
}


.dropdown-content {
display: none;
position: absolute;
background-color: #DDDDEE;
border: 3px solid pink;
border-top: hidden !important;
border-radius: 16px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}

/* Links inside the dropdown */
.dropdown-content a {
color: #B76E79;
padding: 12px 16px;
text-decoration: none;
display: block;
}


.dropdown-content a:hover {color: #B76E79}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown 
content is shown */
.dropdown:hover .dropbtn {
color: #B76E79;
background-color: #DDDDEE;
}
</style>

</head>
<body>
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
 <ul class = "nav">
 <li class= "one"><a href = "main_page.html">Home</a></li>
 <li class= "two"><a href = "orig_fig.html">Original Figurines</a></li>
 <li class= "three"><a href ="villages.html">Villages</a></li>
 <div class = "dropdown">
 <a href= "guest_collect.html"<button class="dropbtn">The Guest 
Collection</button></a>
<div class = "dropdown-content">
    <li class="c"><a href ="seuss.html">Dr. Seuss</a></li>
    <li class="d"><a href ="Rudolph.html">Rudolph and Friends</a></li>
    <li class="e"><a href ="santa.html">Santa</a></li>
    <li class="f"><a href ="oz.html">Wizard of Oz</a></li>
</div>
</div>
</li>
<li class= "four"><a href ="orna.html">Oranments</a></li>
<li class= "five"><a href ="sno_bunn.html">Snow Bunnies</a></li>
</ul>
</body>
</html>

CSS

/*navbar*/

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

.nav li{
display: inline-block;
}


.nav a {
display: inline-block;
color: pink;
font-family: 'Homemade Apple', cursive;
padding: 6px;}


.nav li a:hover {
color: #B76E79; 
padding: 8px;
z-index: 1;
}  

.one,.two,.three,.four,.five {
border: 3px solid pink;
border-radius: 16px;}

.one:hover,.two:hover,.three:hover,.four:hover,.five:hover {
background: #DDDDEE;
}

最佳答案

据我所知，您所说的“定位”变化来自额外的 padding悬停。这是特别来自声明:

.nav li a:hover {
    padding: 8px;
}

删除它可以解决问题。但是，除此之外，您的 <a>标签缺少 > , 你有一个 </li>太多了。

在以下示例中也更正了这两个问题:

/* Style The Dropdown Button */

.dropbtn {
  background-color: transparent;
  font-family: 'Homemade Apple', cursive;
  color: pink;
  padding: 4px;
  font-size: 16px;
  cursor: pointer;
  border: 3px solid pink;
  border-radius: 16px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #DDDDEE;
  border: 3px solid pink;
  border-top: hidden !important;
  border-radius: 16px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: #B76E79;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  color: #B76E79
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown 
content is shown */

.dropdown:hover .dropbtn {
  color: #B76E79;
  background-color: #DDDDEE;
}


/*navbar*/

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

.nav li {
  display: inline-block;
}

.nav a {
  display: inline-block;
  color: pink;
  font-family: 'Homemade Apple', cursive;
  padding: 6px;
}

.nav li a:hover {
  color: #B76E79;
  /*padding: 8px;*/
  z-index: 1;
}

.one,
.two,
.three,
.four,
.five {
  border: 3px solid pink;
  border-radius: 16px;
}

.one:hover,
.two:hover,
.three:hover,
.four:hover,
.five:hover {
  background: #DDDDEE;
}
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
<ul class="nav">
  <li class="one"><a href="main_page.html">Home</a></li>
  <li class="two"><a href="orig_fig.html">Original Figurines</a></li>
  <li class="three"><a href="villages.html">Villages</a></li>
  <div class="dropdown">
    <a href="guest_collect.html"><button class="dropbtn">The Guest 
Collection</button></a>
    <div class="dropdown-content">
      <li class="c"><a href="seuss.html">Dr. Seuss</a></li>
      <li class="d"><a href="Rudolph.html">Rudolph and Friends</a></li>
      <li class="e"><a href="santa.html">Santa</a></li>
      <li class="f"><a href="oz.html">Wizard of Oz</a></li>
    </div>
  </div>
  <li class="four"><a href="orna.html">Oranments</a></li>
  <li class="five"><a href="sno_bunn.html">Snow Bunnies</a></li>
</ul>

关于您的第二个问题，您不必为每个列表项元素分配一个类。您可以定位 li直接地。完全取决于哪个 <li>您尝试定位的元素，您可以增加 specificity .

你的问题是.nav li不会工作，因为这将针对任何 <li> .nav 的子元素.为了仅针对直接 child (不包括孙子)，您需要使用 child combinator ( > ) ，与 .nav > li .

最后，恐怕 StackOverflow 是一个问答网站，而不是与其他开发人员联系的地方。如果您想联系其他程序员，没有比 StackOverflow Chat 更好的地方了。 .

希望对您有所帮助! :)

关于html - 子菜单项不断移动...如何使它们固定？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46657592/

25 4 0
文章推荐： javascript - 有谁知道如何用javascript更改文本字段插入符的字符？
文章推荐： css - 将固定表格转换为响应式移动表格
文章推荐： javascript - 移动 Chrome 栏占用 100% 高度 css 的空间
文章推荐： css - 使用 rails 设置背景图像 css