Gap between menu and sub-menu
-
There is a space between main menu and subpages which messes up the navigation (as I move the mouse away from menu submenu disappears). I’ve seen similar topics and usually this was caused by margin determined in the style sheet – I tried changing some variables but could not find which line causes this. Could someone help me to spot it?
the menu:
/*Page menu*/ #botmenu{ height:60px; margin:20px 0px 0px 0px; font-family:monotype corsiva,Arial, verdana,Century gothic, sans-serif; float:right; } #submenu { margin: 0px 0px ; width:auto; padding:0px 0px; } #submenu ul { width: 100%; float: left; list-style: none; margin: 0; padding: 0 0px; } #submenu li { float: left; list-style: none; margin: 10px 20px 0px 0px; padding: 0; color: #B40404; font-weight: bold; font-size: 28px; } #submenu li a { color: #B40404; display: block; margin: 0; padding: 12px 10px 12px 10px; text-decoration: none; position: relative; font-weight: bold; } #submenu li a:hover, #submenu li a:active, #submenu .current_page_item a { color: #F78181; font-weight: bold; } #submenu li a.sf-with-ul { padding-right: 10px; } #submenu li li a, #submenu li li a:link, #submenu li li a:visited { font-size: 20px; color: #B40404; text-shadow:none; width: 148px; margin: 0; padding: 0px 10px; line-height:35px; border-bottom:1px solid #222; border-top:1px solid #111; border-left:1px solid #111; border-right:1px solid #222; text-transform: none; position: relative; background:#ffffff; } #submenu ul ul li:first-child{ border-top:none; } #submenu ul ul li:last-child{ border-bottom:none; } #submenu li li:last-child{ border-bottom:none; } #submenu li li a:hover, #submenu li li a:active { background:#ffffff; color: #F78181; } #submenu li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 5px 0px; padding: 5px 0px; background:#fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #submenu li ul a { width: 150px; } #submenu li ul a:hover, #submenu li ul a:active { } #submenu li ul ul { margin: -15px 0 0 15px; } #submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul { left: -999em; } #submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul { left: auto; } #submenu li:hover, #submenu li.sfHover { position: static; }
the navigation section has only this:
/* The Navigation */ #tnavigation{ margin:10px 0px 0px 0px; padding:5px 0px; }
Viewing 5 replies - 1 through 5 (of 5 total)
Viewing 5 replies - 1 through 5 (of 5 total)
- The topic ‘Gap between menu and sub-menu’ is closed to new replies.