Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on

Remove white space between drop down buttons

Not sure how this happened but now I have white space between drop down buttons.  I have adjusted  the margins and padding and nothing seems to remove it.   I know it is a simple fix but can't seem to locate the perp.

http://6ba.036.myftpupload.com/

Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
	clear: both;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 1.5;
	width: 100%;
	text-align: right;
}

.genesis-nav-menu a {
	color: #333;
}

.genesis-nav-menu .menu-item {
	display: inline-block;
	text-align: left;
}

.genesis-nav-menu a {
	display: block;
	    padding: 20px 30px 20px 5px;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color: #31b2ed;
}

.genesis-nav-menu .sub-menu {
	border-top: 1px solid #ececec;
	left: -9999px;
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition:    opacity .4s ease-in-out;
	-ms-transition:     opacity .4s ease-in-out;
	-o-transition:      opacity .4s ease-in-out;
	transition:         opacity .4s ease-in-out;
	width: 200px;
	z-index: 99;
}

.genesis-nav-menu .sub-menu a {
	background-color: #f8f8f8;
	border: 1px solid #ececec;
	border-top: none;
	color: #333;
	font-size: 15px;
	padding: 16px 15px;
	position: relative;
	width: 200px;
	margin:0px;
}

.genesis-nav-menu .sub-menu .sub-menu {
	margin: -52px 0 0 199px;
}

.genesis-nav-menu .menu-item:hover {
	position: static;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
	left: auto;
	opacity: 1;
}

.genesis-nav-menu > .first > a {
	padding-left: 0;
}

.genesis-nav-menu > .last > a {
	padding-right: 0;
}

.genesis-nav-menu > .right {
	float: right;
	list-style-type: none;
	padding: 0;
}

.genesis-nav-menu > .date,
.genesis-nav-menu > .right > a {
	display: inline-block;
	padding: 20px 24px;
}

.genesis-nav-menu > .search {
	padding: 8px 0 0;
}

.genesis-nav-menu > .search input {
	font-size: 12px;
	padding: 12px 20px;
}


#menu-item-104 a {/*pushes home button flush right*/
   padding-right: 0;
} 

Open in new window

SOLUTION
Avatar of Paul MacDonald
Paul MacDonald
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nsitedesigns

ASKER

Thanks while that did fix the drop down problem, it also shortened the height of the main navigation bar which we didn't want to modify.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
"...it also shortened the height of the main navigation bar..."
Yes, well, that's how you have your CSS defined.

You can accomplish the same thing by changing...
.nav-primary .sub-menu {
    border-color: #222;
}
...to...
.nav-primary .sub-menu {
    border-color: #222;
    line-height: 0.8;
}
...but as before, this may have unexpected implications elsewhere.  This is pretty specific though, so I wouldn't think any problems would spread too far.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks!
thanks