Can&#039;t figure out the dropdown..

Hey!

I’ve downloaded a template with a menu, but it’ doesn’t show to submenu’ in the dropdown…

I’m not that good in css and, and need some help..

The CSS file:

#nav a, #subMenusContainer a {
    display: block;
    text-decoration: none;
}
#nav a {
    color: #FFFFFF;
    float: left;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 12px 14px;
    text-transform: uppercase;
}
#subMenusContainer a, #nav li li a {
    background-color: #DDDDDD;
    color: #302F2F;
    font-size: 12px;
    padding: 6px 24px;
    text-align: left;
    text-shadow: none;
}
#nav li a:hover, #nav li a:focus, #nav a.mainMenuParentBtnFocused {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
}
#subMenusContainer a:hover, #subMenusContainer a:focus, #subMenusContainer a.subMenuParentBtnFocused {
    background-color: #E9E9E9;
    color: #302F2F;
    text-shadow: none;
}
.subMenuParentBtn {
    background: url("../img/arrow_right.gif") no-repeat scroll right center transparent;
}
.subMenuParentBtnFocused {
    background: url("../img/arrow_right_over.gif") no-repeat scroll right center transparent;
}
.mainMenuParentBtn {
}
.mainMenuParentBtnFocused {
}
.smOW {
    display: none;
    margin: 0 0 0 -2px;
    overflow: hidden;
    padding: 0 2px;
    position: absolute;
}
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
    line-height: 1em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
    background: none repeat scroll 0 0 transparent;
    left: 0;
}
#nav li {
    border-right: 1px solid #333333;
    cursor: pointer;
    display: inline;
    float: left;
    height: 35px;
    margin: 7px 0 0;
    padding: 0;
}
#nav li:first-child {
    background: none repeat scroll 0 0 transparent;
}
#subMenusContainer li {
    list-style: none outside none;
}
#nav {
    clear: both;
    display: block;
    font-size: 11px;
    margin: 0 auto;
    overflow: hidden;
    text-shadow: 0 1px 0 #000000;
    width: 916px;
}
#nav .children {
    display: none;
}
#subMenusContainer {
    display: block;
    height: 0;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000000000;
}

Viewing 8 replies - 1 through 8 (of 8 total)

(@anevins)

WCLDN 2018 Contributor | Volunteer support

You may want to follow this tutorial which explains how to create a dropdown menu, however ensure the menu structure is similar;
https://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Thread Starter

(@rovsing)

I do know how to make a dropdown..

what I don’t know, and wants to know is, why the submenu’s not is shown in the dropdown in the code i posted. :p

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Post the HTML of the menu as well.

Thread Starter

(@rovsing)

The only HTML of it is this found in header.php
Not sure if it’s what you want… There is also some .js files??

<script src="<?php bloginfo('template_directory'); ?>/menu/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/menu/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lt IE 7]>
	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/menu/MenuMatic-ie6.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
<!-- Load the MenuMatic Class -->
<script src="<?php bloginfo('template_directory'); ?>/menu/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
<?php echo get_theme_option("head") . "\n"; function functions_file_exists() { if (!file_exists(dirname(__file__) . "/functions.php") || !function_exists("theme_usage_message") ) { echo ("<p style=\"padding:10px; margin: 10px; text-align:center; border: 2px dashed Red; font-family:arial; font-weight:bold; background: #fff; color: #000;\">This theme is released free for use under creative commons licence. All links in the footer should remain intact. These links are all family friendly and will not hurt your site in any way. This great theme is brought to you for free by these supporters.</p>"); die; } } functions_file_exists(); wp_head(); ?>

</head>
<body>
<script type="text/javascript">
	window.addEvent('domready', function() {
			var myMenu = new MenuMatic();
	});
</script>
	<div id="wrapper">
<div id="wrapper-bg">
		<div id="outer-wrapper" class="outer-wrapper">
			<div class="outer">
				<div class="menu-links">
                    <div id="pagemenucontainer">
					<?php
                    if(function_exists('wp_nav_menu')) {
                        wp_nav_menu( 'depth=1&theme_location=menu_1&menu_id=pagemenu&outer-wrapper=&fallback_cb=menu_1_default');
                    } else {
                        menu_1_default();
                    }

                    function menu_1_default()
                    {
                        ?>
                        <ul id="pagemenu">
    						<li <?php if(is_home()) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Hjem</a></li>
    						<?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' ); ?>
    					</ul>
                        <?php
                    }

                ?>
                    </div>
				</div>

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Assuming you’re using Windows, view the web page, right click on the page, select “View source”, copy all the contents of that pop-up window, paste it in Pastebin.com and give us a link.

Thread Starter

(@rovsing)

Like this? https://pastebin.com/XHGLDgBr

(@anevins)

WCLDN 2018 Contributor | Volunteer support

There are no dropdown links in the HTML.

Thread Starter