Okay, well these are the repairs for build 2332 accordion to drop down menu.
I found inherit doesn't work when you do it from scratch so back to the old way to fix them.
I would still add the missing dropdown class from the coffeecup tutorial though
I'll update my step by step tutorial with this in a few days...
Also I wrote a jQuery fix for the active style since we use these with a RSD symbol
That way your visitors can use the menu to see which page they are on, it will automatically change the main menu link style for each page.
On each page paste this in the HEAD
<style>
/* DROP COLOR REPAIR */
.dropdown.menu .is-active > a {
color: #ccc;
background-color: #000;
width:auto;
}
.dropdown.menu .is-active > a:hover {
color: #fff;
background-color: #000;
}
/* DROP SUB PANEL CUSTOMIZING */
.is-dropdown-submenu {
border: 1px solid #f8b003;
min-width: 100%;
width:auto;
}
/* MENU ACTIVE LINK COLOR */
a.link-text.menu-link.active {
color: #f8b003;
}
</style>
CSS:
DROP COLOR REPAIR
Fixes the menu link colors and background colors from the default foundation blue. You just change those with the hex colors you are using
DROP SUB PANEL CUSTOMIZING
That is for styling the drop down menu panels you can add in the css you want to use. The width styles will make the dropddown panel match the main link width when possible but still expand it if needed
MENU ACTIVE LINK COLOR
That's the style of the main links color so your users can tell which page they are on from the menu. You can add a background or border etc. in that css to match what your menu style is
On each page paste this in the FOOTER for the active fix
This doesn't need to be changed it's written to do it dynamically for you.
<script>
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$("a.link-text.menu-link").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
</script>