[toddw]

I’m sure that my drop down menu has separated from the navigation bar as a result of the frame and other CSS that I added in order to shrink the height of the menu of my site at http://framella.com :

http://userpages.bright.net/~toddw/drop-down-menu.png

#page {
   background-color: #2a2a2a;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0 40px 40px 40px;
}
/* Header Info Bar */
.info-bar {
	background-color: #2a2a2a;
	padding-bottom: 3px;
	font-size: 14px;
}
#site-logo {
	overflow: hidden;
	float: left;
	margin-top: 5px;
	margin-bottom: 4px;
}
.main-navigation a {
	color: #666;
	display: block;
	float: left;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: normal;
	padding: 22px 0 0;
	height: 36px;
}

… but what CSS would I need now in order to move the drop down menu up closer to the main menu?

Thanks and regards,
Todd

[toddw]

I may have answered my own question. I changed “.main-navigation a” class from above, and added a new CSS class… both of which are copied here:

.main-navigation a {
	color: #666;
	display: block;
	float: left;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: normal;
	padding: 22px 0 0;
	height: 38px;
}
.main-navigation ul li ul {
	position: absolute;
	background-color: #fff;
	top: 60px;
	left: 0;
	width: 200px;
}

I changed the height of “.main-navigation a” from 36px to 38px, plus, changed “.main-navigation ul li ul” from a default top: 50px to 60 px to push the drop down menu further down the page on my site (http://framella.com).

If you add a border to your site, as I did to mine, then you will need to adjust the nav bar too, since it is absolutely positioned from the top of the browser window.

Thanks and regards,
Todd

[Author]

Posts