Dropdown menu disappears in Twenty Twelve

It’s caused by too much negative margin on .main-navigation li a:hover.

Also, it seems all the changes are done directly to theme stylesheet (instead of Custom CSS plugin or Child Theme) making it hard to debug. Please consider transfering over all the changes to Custom CSS plugin (or Child Theme), and restore the theme itself to original.

Child theme
http://codex.wordpress.org/Child_Themes

or

Custom CSS plugin
http://wordpress.org/plugins/search.php?q=custom+css

Try this code ( work with original Twentytwelve’s. )

@media screen and (min-width: 600px) {
	.main-navigation ul.nav-menu { text-align: center; }
	.main-navigation ul.nav-menu > li { margin: 0px; display: inline-block; }
	.main-navigation ul.nav-menu > li a { padding-left: 17px; padding-right: 17px; color: #f55454; }
	.main-navigation ul.nav-menu > li a:hover { background: #d92645; color: #fff; }
	.main-navigation ul ul { text-align: left; }
}

This is to properly downscale the logo for small screen.

@media screen and (max-width: 600px) {
	.logo { width: 259px; height: 49px; } /* proportion 370x70 */
	.site-description { width: 259px; text-align: right;margin:0 auto; }
}