Hi folks,
I’m using a list based menu with Javascript that expand/collapse on click. It works fine for menus that has submenus (dynamic links) but I can not get menus without submenus (static links: About/Contact) to work properly.
For some reason it gets a different styling when it is active and I can not see where that styling comes from…
I have made an active style but active menus don’t get the applied settings. I have inserted the menu directly in the index page for About and Contact to get it working.
Here is the css code for the menu:
/* CSS Document */
/****************************************************************************************
* LAYOUT CSS FOR THE MENU
****************************************************************************************/
#dhtmlgoodies_listMenu a { /* Main menu items */
color:#E50069;
font-family: Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration:none;
line-height: 19px;
outline: 0;
}
#dhtmlgoodies_listMenu ul li a{ /* Sub menu */
color: #E50069;
font-family: Helvetica, sans-serif;
line-height: 19px;
font-weight:normal;
outline: 0;
}
#dhtmlgoodies_listMenu ul li ul li a{ /* Sub Sub menu */
color: #E50069;
font-weight:normal;
line-height: 19px;
outline: 0;
}
#dhtmlgoodies_listMenu :hover { /* Styling of hover menu item */
color:#000;
font-weight: bold;
}
#dhtmlgoodies_listMenu .activeMenuLink{ /* Styling of active menu item */
color: #000;
background: #FF0;
margin-left: -4px;
padding: 1px 12px 1px 4px;
font-weight:bold;
line-height: 19px;
}
/*
No bullets
*/
#dhtmlgoodies_listMenu li{
list-style-type:none;
font-weight:normal;
line-height: 19px;
width: auto;
}
/*
No margin and padding
*/
#dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
margin:0;
padding:0px;
font-weight:normal;
line-height: 19px;
}
/* Margin of sub menu items */
#dhtmlgoodies_listMenu ul{
display:none;
margin-left:10px;
margin-top: -1px;
font-weight:normal;
line-height: 19px;
}
#dhtmlgoodies_listMenu .currentlyActiveMenuItem {
color: #000;
font-weight:bold;
background: #FF0;
margin-left: -4px;
padding: 1px 4px 1px 4px;
}
#dhtmlgoodies_listMenu li.active {
color: #000;
font-weight:bold;
background: #FF0;
margin-left: -4px;
padding: 1px 4px 1px 4px;
}
Here is the code for the menu:
<ul id="dhtmlgoodies_listMenu">
<li class="active" style="margin-bottom: 3px;"><a href='/about/'>Om Ego Design</a></li>
<li style="margin-bottom: 3px;"><a href='/contact/'>Kontakt</a></li>
<br />
<li style="margin-bottom: 3px;"><a href="#">Identiteter</a>
<ul>
<li> <a href="/showcase.php?sid=5&cid=1">Bremyk </a></li>
<li> <a href="/showcase.php?sid=5&cid=2">Brelett </a></li>
<li> <a href="/showcase.php?sid=5&cid=3">Testkunde </a></li>
</ul>
</li>
<li style="margin-bottom: 3px;"><a href="#">Pakning</a>
<ul>
<li> <a href="/showcase.php?sid=6&cid=3 ">Testkunde </a></li>
</ul>
</li>
<li style="margin-bottom: 3px;"><a href="#">Andre arbeider</a>
<ul>
</ul>
</li>
<li style="margin-bottom: 3px;"><a href="#">Arkiv</a>
<ul>
</ul>
</li>
</ul>
Any help would be much appreciated.
I have really tried a lot of things to get this working, and if there is a better way please let me know.
Here is a link to page so you can see:
http://www.egodesign.no/about/
Thanks!