Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Menu DropDown Doesn't Work
- This topic has 1 reply, 1 voice, and was last updated 9 years, 11 months ago by keyelementmedia.
-
AuthorPosts
-
April 6, 2014 at 7:26 pm #98787keyelementmediaMember
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:
If that doesn't work, you can try http://www.rockwalluc.com
Thank you, Jared
April 6, 2014 at 7:56 pm #98790keyelementmediaMemberSince 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.