Hello everybody!
I got a issue I would love to share with you, hopefully someone knows a solution for this.
- I have a horizontal menu.
-- In this menu there are 2 root items with a submenu (for now).
--- Every root item has a different background color. (for example: root menu item 1 has a green background, root menu item 2 has an orange background,...)
---- Every submenu has to have a hover with the same background color as the 'expanded' root item (for example: the submenu of the 1st root item has to have a green hover background over every item, submenu of the 2nd root item has to have a orange hover background over every item always including sub-submenu items) ).
I COULD set every CSS ID of every sub-menu-item (wich are allready in it) with a hover with the correct background color, BUT when I ass new sub menu items, they won't have the hover with the correct background color.
I've stumbled onto a website with some Nav Menu Features for CSS:
http://www.dnngo.net/DNNFreeResources...
But I can't get it to work...
Here is the code and CSS, for anyone who wants to try to recreate my Menu to look for the solution of this..
ASCX (just the basic declartion to load NAV Menu):
<div id="menuMenu">
<dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Horizontal" CSSControl="mainMenu" />
</div>
There are 4 root items defined (doesn't matter wich ones exactly)
CSS:
/*-- DotNetNuke menu styles --*/
/* Main Menu td */
.mainMenu {
cursor:pointer;
font-size: 11px;
width:100%;
color:#FFF;
}
/* Main Menu Normal */
.mainMenu .root
{
padding-left:5px;
padding-bottom:2px;
color: #FFF;
font-size: 13px;
text-align:left;
width:146px;
margin-bottom:5px;
display:inline-block;
}
/* Main menu colors */
#dnn_dnnNAV_ctldnnNAVctr41 /* 'Root item 1' */
{
background-color:#FF6633;
}
#dnn_dnnNAV_ctldnnNAVctr62 /* 'Root item 2' */
{
margin-left:5px;
}
#dnn_dnnNAV_ctldnnNAVctr62 /* 'Root item 2' */
{
background-color:#99CC33;
}
#dnn_dnnNAV_ctldnnNAVctr63 /* 'Root item 3' */
{
Background-color:#00CCFF;
margin-left:5px;
}
#dnn_dnnNAV_ctldnnNAVctr64 /* 'Root item 4' */
{
Background-color:#8D7E74;
margin-left:5px;
}
/* Main Menu hover */
.mainMenu .hov {
color:#fff;
background-color:Red;
}
/* Main Menu selected */
.mainMenu .sel, .mainMenu .bc {
color:#FFF;
}
.mainMenu table {
margin-top:5px;
z-index: 5000;
}
/* SUB Menu Normal */
.mainMenu tr.mi
{
background-color:transparent;
z-index: 1000;
font-size: 11px;
font-weight:bold;
text-align:left;
color:#FFF;
line-height:2em;
text-transform:none;
}
.mainMenu tr.mi td {
padding: 0 2px;
text-transform:none;
}
Any questions? Let me know!
Thanks alot for your help!
Alex