Hello,
Thanks for your great menu module!
I could modify the style for our needs, only one problem faced which maybe not a CSS problem, could be a JS issue...
I have set the hover background for the parent menu to light background.
Its almost working properly: when hovering, its changing the background color as should be, BUT when I move the cursor to the current parent menu's dropdown, the parent menu will loose the hover style!
The other menus are working, so when I hover the NON ACTIVE parent menus, and move the cursor to their submenus (dropdown), then the parent menu keeps the hover style. Only the current (active) parent menu is loosing the hover style when hovering its dropdown...what could be the problem?
Here is my menu.min.css
| Code: |
/*
* Ext Core Library Examples 3.0
* http://extjs.com/
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* The MIT License
*
*/
.ux-menu-init-hidden{visibility:hidden;position:absolute; height: 0px; top: -1px; background-color:#F00;}
.ux-menu-container{position:relative; height: 40px;}
.ux-menu,.ux-menu ul{list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;/*line-height:1;*/}
.ux-menu li{position:relative;float:left;}
.ux-menu ul{position:absolute;top:0;left:-10px;}
.ext-border-box .ux-menu-ie-iframe,.ext-ie7 .ux-menu-ie-iframe{padding:0;margin:0;position:absolute;top:0;left:0;display:none;z-index:-1;}
.ux-menu-vertical .ux-menu-item-main{clear:left;}
.ux-menu-horizontal {
margin: 0px; height: 40px;
}
.ux-menu a{
display:block;
position:relative;
text-decoration:none;
color:#fff;
border-left:0px solid #e3dad1;
border-top:0px solid #e3dad1;
border-bottom:0px solid #e3dad1;
font-size:15px;
line-height:12px;
padding-right: 14px;
padding-left: 14px;
line-height: 40px;
height: 40px;
background-image: url(images/bigmenu_bg.png);
background-repeat: no-repeat;
background-position: left center;
}
.ux-menu a.ux-menu-link-last{border-right:1px solid #2464a4;}
/*HOVER*/
.ux-menu a:focus,.ux-menu a:hover,.ux-menu a.ux-menu-link-hover{ background-color:#f5f5f5; outline:0; background-image:none; }
UL#ariext142 LI A:hover, UL#ariext142 LI A:focus, UL#ariext142 LI A.ux-menu-link-hover {
background-color:#f5f5f5;
}
.ux-menu-clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.ux-menu a.ux-menu-link-parent{padding-right:24px;min-width:1px;}
.ux.menu ul a{width: 100%;}
#sumenucontainer {
position:absolute;
top: -1px;
left: -5px;
width: 177px;
}
ul.ux-menu-sub {
background-image:url(images/bigmenu_bg_dropdown.png);
background-repeat: no-repeat;
background-position: left bottom;
width: 159px;
padding-left: 5px;
padding-right: 13px;
padding-bottom: 16px;
margin-top: 0px;
}
.ux-menu-sub A
{
border-style: none !important;
}
/*submenut item*/
UL#ariext142 LI UL.ux-menu-sub A { background-image:none; line-height: 20px; height:auto; margin-top: 5px; margin-bottom: 3px;}
UL#ariext142 LI UL.ux-menu-sub A:hover { background-color:#d5e5f6; width: 139px; }
.ux-menu ul a,.ux-menu.ux-menu-vertical a{
border-bottom:0px;
}
.ux-menu ul a.ux-menu-link-last,.ux-menu.ux-menu-vertical a.ux-menu-link-last{}
.ux-menu-arrow{display:block;width:9px;height:9px;right:8px;top:17px;position:absolute;background:url(images/menu-arrow-down.png) no-repeat;font-size:0;}
.ux-menu.ux-menu-vertical .ux-menu-arrow,.ux-menu ul .ux-menu-arrow{width:6px;height:8px;top:13px;background:url(images/menu-arrow-right.png) no-repeat;}
.ext-border-box .ux-menu-arrow{top:17px;}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,.ext-border-box .ux-menu ul .ux-menu-arrow{top:16px;}
.ux-menu ul.ux-menu-hidden{display:none;}
/* ACTIVE PARENT MENU */
.ux-menu a.current{background-image:url('images/bigmenu_bg_active.png');border: 0px;}
.ux-menu a.current:hover, .ux-menu a.current ux-menu-link-hover, .ux-menu a.current:focus {background-image:none; background-color:#f5f5f5; border: 0px;}
|
Many thanks,
Bulesz
