Positioning sub menu directly under the parent list item

Question

I have been trying to configure this for the last three days... I have looked up numerous amount of ways to do this and I believe I am now the closest I've ever been.

My main issue is that I cannot seem to get the list items from the sub menu to vertically lay under it's parent item (The Guest Collection) when hovered over.

My second issue is that whenever I hover over any list item on the nav bar, it goes haywire (fixed nav bar?)

When searching on google, I found a couple pieces of code that used a "drop down button" for the parent list item... I have used links instead of buttons for my nav bar. Could that be an issue?

If possible, I would like to keep my CSS on an external style sheet.

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 (external style sheet)

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

I have taken some classes on web design, but I am still fairly new with everything... Please be easy on me if this is a dumb question...

Answer 1

So the CSS changes needed are.

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

The issues are.

Since when hovering over a a tag there is a change in size of the a tag, my fix for this is to apply the same padding( padding: 8px; ) and border( border: 3px solid transparent; )(but transparent) to the a tags as default.

Second is, when hovering you are positioning the ul tag as relative, this will mess up the navbar since its adding new elements. The solution will be simply position the element as absolute , this is solving your issue as shown in the below snippet.

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

Answer 2

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

Answer 3

Click fullpage to see what you want.

I rewrite your code, using float other than inline-block, that's ok, I just prefer float.

The key to make this effect is to successfully target the submenu. Here is the > operator.

Second pard is your sub menu item must overlap you top link, because we are using pure css, hover is only we have.

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