Sub menu items keeps moving... How to make them fixed?

Question

Ok, so here we go again...

The elements in my sub-menu keep moving when I hover over them. I can't seem to find anything on this issue. I've asked this question before for my nav bar but the answer I received- (Have the same padding for the a tags and put a border around them- but have it transparent) does not work with the sub-menu. I've tried to play with the padding as well with no luck.

Another thing...(I apologize for all questions, I just hate asking on here.. Some can be condescending) I had assign a class to each element (or list item) of the nav bar because when I attempted to put a border around them, each of the sub-menu elements also inherited the border as well. Is the a "cleaner" way to do it? I tried the :not() tag but I can't seem to get that to work either.

Lastly, I ask questions on this site as a last option. I am a newbie programmer/web designer who is looking to network and would like to connect with people who are more experienced before I get banned from asking a question that someone else sees as futile. If this last request is against the terms of service please let me know - I will delete it.

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;
}

Obsidian Age · Answer 1 · 2017-10-10T02:17:41.890

As far as I can tell, the 'positioning' change you're talking about is coming from the additional padding on hover. This is specifically coming from the declaration:

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

Removing this solves the problem. However, in addition to this, your <a> tag is missing the >, and you have one </li> too many.

Both of those have also been corrected in the following example:

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

As for your second question, you don't have to assign a class to each list item element. You can target the li directly. Depending on exactly which <li> elements you're trying to target, you can increase the specificity.

The problem for you is that .nav li won't work, as that will target any <li> element that is a child of .nav. In order to only target the direct children (excluding grandchildren), you need to make use the child combinator (>), with .nav > li.

Finally, I'm afraid that StackOverflow is a question-answer website, not a place to connect with other developers. If you're looking to connect to other programmers, there's no better place than StackOverflow Chat.

Hope this helps! :)

Ehsan · Answer 2 · 2017-10-10T03:30:07.593

It is not correct use of div in ul, ul accepts li as children only.

See this: More

so, use li instead of div like this:

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

And insert this css code:

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%;
}

And other css codes:see code snippet

.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%;
}

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

Sub menu items keeps moving... How to make them fixed?

2 Answers2