Listmenu styling problem

HTML & CSS
1

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!

2

It’s not really clear to me what the issue is. If I visit the About and Contact pages, the link is highlighted.

3

Thank you for your reply.

Yes they are highlighted, but not the way I have declared in the css.
It should have black text and the yellow background should not be full width, only a little padding as in the css.
Same as the links on Identity below.

4

You need to style the <a> rather than the <li>:

#dhtmlgoodies_listMenu li.active [COLOR="#FF0000"]a[/COLOR] {
color: black;
font-weight: bold;
background: yellow;
}
5

Perfect:-)

Thank you very much!

6

You’re most welcome. :slight_smile: