子菜单项不断移动......如何修复它们？

时间：2017-10-10 02:04:40

标签： html css

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

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

另一件事......（我为所有问题道歉，我只是讨厌在这里询问..有些可能是居高临下的）我已经为导航栏的每个元素（或列表项）分配了一个类，因为当我试图在它们周围放置一个边框，每个子菜单元素也都继承了边框。是一个＆＃34;清洁＆＃34;这样做的方法？我尝试了: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;
}

2 个答案:

答案 0 :(得分：0)

据我所知，您所谈论的“定位”变化来自于悬停时的额外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元素。.nav > li。为了只针对直接子女（不包括孙子女），您需要使用 child combinator (>) ，data = sc.parallelize([('a','b','c', 1,4), ('o','u','w', 9,3), ('s','q','a', 8,6), ('l','g','z', 8,3), \ ('a','b','c', 9,8), ('s','q','a', 10,10), ('l','g','z', 20,20), ('o','u','w', 77,77)]) 。

最后，我担心StackOverflow是一个问答网站，而不是与其他开发者联系的地方。如果您希望与其他程序员联系，那么 StackOverflow Chat 就没有比这更好的了。

希望这有帮助！ ：）

答案 1 :(得分：0)

div ul使用ul是不正确的，li仅接受li作为孩子。

请参阅：More

所以，请使用div代替 <li class = "dropdown"> <a href= "guest_collect.html">The Guest Collection</a> <ul 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> </ul> </li> ，如下所示：

li {
    position: relative;
}

li:hover ul {
    display: block;
    padding: 0;
    z-index: 999;
}

li ul {
    position: absolute;
    display: none;
    list-style: none;
    background-color: #DDDDEE;
    border-radius: 5px;
    top: 42px;

}

.nav li ul li {
    width: 100%;
}

并插入此css代码：

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

.nav li{
display: inline-block;

}


.nav a {
display: 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,.dropdown {
border: 3px solid pink;
border-radius: 16px;}

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

li {
    position: relative;
}

li:hover ul {
    display: block;
    padding: 0;
    z-index: 999;
}

li ul {
    position: absolute;
    display: none;
    list-style: none;
    background-color: #DDDDEE;
    border-radius: 5px;
    top: 42px;

}

.nav li ul li {
    width: 100%;
}

和其他css代码：请参阅代码段

＆＃13;
＆＃13; 
<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>

 <li class = "dropdown">
    <a href= "guest_collect.html">The Guest 
    Collection</a>
    <ul 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>
    </ul>
</li>

</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>
＆＃13; 
CREATE TABLE CUST
    (EMP int, DATECOL date, VALUE varchar2(1))
;

INSERT ALL 
    INTO CUST (EMP, DATECOL, VALUE)
         VALUES (1, to_date('01-Jan-2017','dd-mon-yyyy'), 'R')
    INTO CUST (EMP, DATECOL, VALUE)
         VALUES (2, to_date('01-Feb-2017','dd-mon-yyyy'), 'R')
SELECT * FROM dual
;

CREATE TABLE TEMP1
    (EMP int, DATECOL date, USER1 int, USER4 int)
;

INSERT ALL 
    INTO TEMP1 (EMP, DATECOL, USER1, USER4)
         VALUES (1, to_date('02-Mar-2016','dd-mon-yyyy'), 3, 4)
    INTO TEMP1 (EMP, DATECOL, USER1, USER4)
         VALUES (1, to_date('01-May-2017','dd-mon-yyyy'), 3, 3)
    INTO TEMP1 (EMP, DATECOL, USER1, USER4)
         VALUES (2, to_date('01-Feb-2017','dd-mon-yyyy'), 9, 2)
SELECT * FROM dual
;

CREATE TABLE TEMP2 
    (DATECOL date, VALUE varchar2(1), USER4 int)
;

INSERT ALL 
    INTO TEMP2  (DATECOL, VALUE, USER4)
         VALUES (to_date('01-Jan-2001','dd-mon-yyyy'), 'S', 100)
    INTO TEMP2  (DATECOL, VALUE, USER4)
         VALUES (to_date('01-Jan-2003','dd-mon-yyyy'), 'P', 200)
    INTO TEMP2  (DATECOL, VALUE, USER4)
         VALUES (to_date('03-Jan-2007','dd-mon-yyyy'), 'R', 300)
    INTO TEMP2  (DATECOL, VALUE, USER4)
         VALUES (to_date('01-Aug-2017','dd-mon-yyyy'), 'R', 350)
SELECT * FROM dual
;

CREATE TABLE TEMP3
    (EMP int, DATECOL date, VALUE varchar2(1))
;

INSERT ALL 
    INTO TEMP3 (EMP, DATECOL, VALUE)
         VALUES (1, to_date('02-Mar-2016','dd-mon-yyyy'), 'R')
    INTO TEMP3 (EMP, DATECOL, VALUE)
         VALUES (1, to_date('01-May-2017','dd-mon-yyyy'), 'R')
    INTO TEMP3 (EMP, DATECOL, VALUE)
         VALUES (2, to_date('01-Feb-2017','dd-mon-yyyy'), 'R')
SELECT * FROM dual
;
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题