Header Menu DropDown Doesn't Work

Community Forums Forums Design Tips and Tricks Header Menu DropDown Doesn't Work

This topic is: not resolved

This topic contains 1 reply, has 1 voice, and was last updated by  keyelementmedia 5 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #98787

    keyelementmedia
    Participant
    Post count: 36

    I’ve created a header menu and put in some sub menu items or dropdowns for the About menu item. When you hover over the dropdown menu items appear, however you can’t get them to stay once you try to select one. They disappear. It seems like there is a gap between the main menu item and the dropdown items, causing them to disappear before you can get a mouse over them.

    The site is currently being switched over, but the current URL is:

    http://rockwallit.com/rwuc/

    If that doesn’t work, you can try http://www.rockwalluc.com


    Thank you, Jared

    http://rockwallit.com/rwuc/
    #98790

    keyelementmedia
    Participant
    Post count: 36

    Since the site is in process of having the DNS updated, I’ll put in the CSS code for the header menu below, I’m not sure you’ll be able to see the site since it is moving:

    #header ul.nav,
    #header ul.menu {
    	float: right;
    	margin-top:20px;
    	
    	
    }
    
    #header ul.nav ul,
    #header ul.menu ul {
    	float: right;
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	
    	
    }
    
    /*#menu-item-15 {
    -khtml-border-radius: 5px 0 0 0;
    	-moz-border-radius: 5px 0 0 0;
    	-webkit-border-radius: 5px 0 0 0;
    	border-radius: 5px 0 0 0;
    	}
    		
    #menu-item-15 a {
    -khtml-border-radius: 5px 0 0 0;
    	-moz-border-radius: 5px 0 0 0;
    	-webkit-border-radius: 5px 0 0 0;
    	border-radius: 5px 0 0 0;
    	} */
    
    #header ul.nav li,
    #header ul.menu li {
    	background-color:#FFF;
    	float: left;
    	list-style-type: none;
    	height:35px;
    	
    	
    }
    
    #header ul.nav li a,
    #header ul.menu li a {
    	color: #051b49;
    	display: block;
    	font-family: 'Droid Sans', arial, serif;
    	font-size: 16px;
    	margin:0;
    	padding: 10px 13px 0;
    	text-decoration: none;
    	text-transform: uppercase;
    	height:35px;
    }
    
    #header ul.nav li a:hover,
    #header ul.nav li a:active,
    #header ul.nav .current_page_item a,
    #header ul.nav .current-cat a,
    #header ul.nav .current-menu-item a,
    #header ul.menu li a:hover,
    #header ul.menu li a:active,
    #header ul.menu .current_page_item a,
    #header ul.menu .current-cat a,
    #header ul.menu .current-menu-item a {
    	background-color: #051b49;
    	color: #fff;
    	height:35px;
    	display:block;
    }
    
    #header ul.nav li a .sf-sub-indicator,
    #header ul.menu li a .sf-sub-indicator {
    	display: block;
    	overflow: hidden;
    	position: absolute;
    	text-indent: -9999px;
    }
    
    #header ul.nav li li a,
    #header ul.nav li li a:link,
    #header ul.nav li li a:visited,
    #header ul.menu li li a,
    #header ul.menu li li a:link,
    #header ul.menu li li a:visited {
    	background-color: #FFF;
    	border: 1px solid #051b49;
    	border-top-width: 0;
    	color: #051b49;
    	font-size: 11px;
    	padding: 5px 10px;
    	position: relative;
    	text-transform: none;
    	width: 138px;
    	text-transform:uppercase;
    	margin:0;
    }
    
    #header ul.nav li li a:hover,
    #header ul.nav li li a:active,
    #header ul.menu li li a:hover,
    #header ul.menu li li a:active {
    	background-color: #051b49;
    	color:#FFF;
    }
    
    #header ul.nav li ul,
    #header ul.menu li ul {
    	height: auto;
    	left: -9999px;
    	position: absolute;
    	width: 160px;
    	z-index: 9999;
    }
    
    #header ul.nav li ul a,
    #header ul.menu li ul a { 
    	width: 140px;
    }
    
    #header ul.nav li ul ul,
    #header ul.menu li ul ul {
    	margin: -31px 0 0 159px;
    }
    
    #header ul.nav li:hover>ul,
    #header ul.nav li.sfHover ul,
    #header ul.menu li:hover>ul,
    #header ul.menu li.sfHover ul {
    	left: auto;
    }
    

    Thank you, Jared

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.