CODEWITHSUNDEEP
htmlcss
SeanQuinn781
SeanQuinn781

Reputation: 103

How to add margin to drop down menu without losing ability to scroll down to it

I have a drop down menu that is overlapping on the main menu (hover over Menu button). Please see the site at:

The problem is, if I add a top margin to the sub menu, it looks great, but then disappears when I mouseout of the main navigation item. To see what I mean, please try and inspect using firebug or chrome, and add margin-top:2em to the sub-menu as seen below. Any ideas for work arounds or solutions are welcome!

.sub-menu {
position: absolute;
top: 100%;
left: 50%;
display: none;
min-width: 170px;
background-image: url('http://add-ocd.com/gustazoscafe/wp-   content/uploads/2015/06/headerbackground.png');
text-align: center;
background: white;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
background-image: url('http://add-ocd.com/gustazoscafe/wp-content/uploads/2015/06/headerbackground.png') !important;
transform: translateX(-50%);
margin-top: 2em;
}

Upvotes: 1

Views: 65

Answers (1)

nithin
nithin

Reputation: 163

Try this and let me know your feedback.

nav > ul > li.menu-item{
  margin-bottom: -2px;
}
.nav--main > .menu-item > a{
  padding-bottom: 25px;
  padding-top: 25px;
}

Upvotes: 1

Related Questions