• Resolved viktorija.n.

    (@viktorijan)


    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.