submenu is hiding in the navigation div

1 Views

I’m coding a client site http://scratchmediaohio.com/wordpress/

When I coded locally, the submenu had no trouble showing up on hover, but now as I’m slowly integrating to wordpress, I’m having various issues trying to get it to show up. I’ve tried z-indexing, etc., I’m sure I’ve overdone something or overlooked something but I’m running out of ideas.

Read More

css code: 

#navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'sinkin_sans400_regular';
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  background: rgb(58,58,58);
  border-top: solid 3px #fff;
  border-bottom: solid 3px #fff;
  /*
  box-shadow:  0px -2px 3px -1px rgba(0, 0, 0, 1);
  */
}

#navigation li {
  float: left;
}

#navigation li:hover {
  background: #f2dcc7;
  color: white;
  -webkit-border-radius: 0px 0px 8px 8px; 
  -moz-border-radius: 0px 0px 8px 8px; 
  border-radius: 8px 8px 0px 0px; 
}

#navigation li:first-child {
  
}

#navigation li a {
  display: block;
  padding: 12px 20px;
  font-size: 12px;
  text-decoration: none;
  line-height: 40px;
  color: #6d4927;
}

#navigation li a:hover {
	color: #6d4927;
}

#navigation ul {
  /*display: none;*/
  position: absolute;
  list-style: none;
  margin-left: -3px;
  padding: 0;
  overflow: hidden;
}

#navigation ul li {
  /*float: none;*/
}

#navigation li:hover > ul {
  display: block;
  background: #f2dcc7;
  border: solid 3px #fff;
  color: #6d4927;
  border-top: 0;
  -webkit-box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  -webkit-border-radius: 0px 0px 8px 8px; 
  -moz-border-radius: 0px 0px 8px 8px; 
  border-radius: 0px 0px 8px 8px; 
}

#navigation li:hover > ul li:hover {
}

#navigation li li a:hover {
  background: #d69f6b;
  color: white;
}

.sub-menu {}

As a note, I did grab this submenu code from a codepen and tried tweaking it as it had issues in the beginning.

Post Views: 1

Related posts

2 comments

  1. You #navigation ul is overflow:hidden;

    By amending it to:

    #navigation ul {
  overflow: visible;
}

    Your submenus will show

  2. You have a few things wrong with your html, on your site but to answer your question above…

    Firstly remove the overflow hidden style from the nav ul.

    #navigation ul {/*overflow: hidden;*/}

    Then apply these two styles:

    .sub-menu {display: none;}
li.menu-item-has-children:hover > .sub-menu {display: block;}

Comments are closed.