if you want to do CSS only, you could take advantage of keyframes, which
works on most browsers these days
http://caniuse.com/#search=css-animation
add a simple CSS animation:
@keyframes showSubnav {
0% { opacity: 0; }
100% { opacity: 1; }
}
add the animation elements to your :hover ul class
#pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav li:hover
ul {
[...] /* opacity: 1; // remove this, will now be specified in the keyframe
*/ animation-delay: 200ms; // spreading the 400ms across the delay +
duration, adjust as desired animation-direction: normal;
animation-duration: 200ms; // second half of the requested 400ms delay.
animation-name: showSubnav; animation-iteration-count: 1;
animation-fill-mode: forwards; }
you will discover another issue though, the subnav is triggered by hover on
the LI not the A, so i'd recommend moving the styling for the a:hover into
a ul#subnav > li:hover > a class so it all happens together, like so:
#pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav >
li:hover > a
On Thu, Mar 10, 2016 at 6:15 PM, J.C. Berry <jcharlesbe...@gmail.com> wrote:
> Thanks again, everyone. Now I have an issue that is more of a usability one
> with that menu.
>
> We need:
> 1. The submenus to delay opening until after the main menu animation/bkgd
> color (0.4s).
> 2. And for the main menu item to stay highlighted while the mouse is over
> the submenu.
>
> I just didn't know if either of these is possible with CSS?
>
> On Thu, Mar 10, 2016 at 3:09 PM, J.C. Berry <jcharlesbe...@gmail.com>
> wrote:
>
> > Works great! Beautiful Dave. Thanks to Karl as well.
> >
> > On Thu, Mar 10, 2016 at 2:57 PM, Dave Chiu <chiu.dave+c...@gmail.com>
> > wrote:
> >
> >> adding vertical-align: top will at least get FF and Chrome to act the
> same
> >> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li
> a
> >> {
> >> [...]
> >> vertical-align: top;
> >> }
> >>
> >> then adjust the margin-top on the list item from 6 to 7
> >> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li
> {
> >> margin-top: 7px !important;
> >> }
> >>
> >> there is also a small issue where in Firefox the height of the anchor
> tag
> >> on hover is 41px, and in Chrome it's 40px, but i think the above is the
> >> quickest way to answer what you asked for without changing more.
> >>
> >> On Thu, Mar 10, 2016 at 5:28 PM, J.C. Berry <jcharlesbe...@gmail.com>
> >> wrote:
> >>
> >>> Hi everyone, could you help with an issue I am having with a menu hover
> >>> background color in Firefox?
> >>>
> >>> http://www.xifin.com/pronet/partners
> >>>
> >>> You will notice that the hover bleeds about 1px on the bottom. Any
> ideas?
> >>>
> >>> Thanks!
> >>>
> >>> --
> >>> J.C. Berry, M.A.
> >>> UI Developer
> >>> 619.306.1712(m)
> >>> jcharlesbe...@gmail.com
> >>> http://www.mindarc.com
> >>>
> >>>
> ------------------------------------------------------------------------------------------------------------------------------------------------
> >>>
> >>> This E-mail is covered by the Electronic Communications Privacy Act, 18
> >>> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> >>> confidential information and is intended only for the use of the
> >>> individual
> >>> or entity named above. If the reader of this message is not the
> intended
> >>> recipient, you are hereby notified that any dissemination, distribution
> >>> or
> >>> copying of this communication is strictly prohibited.
> >>>
> >>>
> ------------------------------------------------------------------------------------------------------------------------------------------------
> >>> ______________________________________________________________________
> >>> css-discuss [css-d@lists.css-discuss.org]
> >>> http://www.css-discuss.org/mailman/listinfo/css-d
> >>> List wiki/FAQ -- http://css-discuss.incutio.com/
> >>> List policies -- http://css-discuss.org/policies.html
> >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >>>
> >>
> >>
> >
> >
> > --
> > J.C. Berry, M.A.
> > UI Developer
> > 619.306.1712(m)
> > jcharlesbe...@gmail.com
> > http://www.mindarc.com
> >
> >
> ------------------------------------------------------------------------------------------------------------------------------------------------
> >
> > This E-mail is covered by the Electronic Communications Privacy Act, 18
> > U.S.C. ?? 2510-2521 and is legally privileged. This information is
> > confidential information and is intended only for the use of the
> individual
> > or entity named above. If the reader of this message is not the intended
> > recipient, you are hereby notified that any dissemination, distribution
> or
> > copying of this communication is strictly prohibited.
> >
> >
> ------------------------------------------------------------------------------------------------------------------------------------------------
> >
>
>
>
> --
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
> jcharlesbe...@gmail.com
> http://www.mindarc.com
>
> ------------------------------------------------------------------------------------------------------------------------------------------------
>
> This E-mail is covered by the Electronic Communications Privacy Act, 18
> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> confidential information and is intended only for the use of the individual
> or entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any dissemination, distribution or
> copying of this communication is strictly prohibited.
>
> ------------------------------------------------------------------------------------------------------------------------------------------------
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
