Hi,
Thanks for your responses! I added the, #nav .sub {position:
relative;}, removed the {display:none;} from my CSS file and from the ASPX
page. Still not getting a solution. The #nav .sub {position: relative;} helped
because it positioned the child elements directly below the parent. However, it
repeated the next child element in the group below the above child element, and
the same for the next one, in a vertical formate. I don't need it to do that. I
need it to display the whole group of child elements going across horizontally
directly below the parent. So take the following as an example:
A B C "1 2 3"
User hovers over Parent A, Childs 1, 2, and 3 will display directly below A
going across. I'm not good with Java. I believe this site and menu system does
use some Java. I'm trying to stay away from it and achieve this functionality
through the use of CSS.
Anyway to make this possible?
Thanks guys,Andy
> Subject: Re: [WSG] CSS variable navigational menu`
> From: weblis...@gmail.com
> Date: Sun, 9 Jan 2011 09:40:28 -0800
> To: wsg@webstandardsgroup.org
>
>
> On Jan 9, 2011, at 7:04 AM, Benjamin Hawkes-Lewis wrote:
> >
> > Make the parents the containing blocks for the absolute positioning of
> > the children:
> >
> > #nav .sub {
> > position: relative
> > }
> >
> > http://reference.sitepoint.com/css/containingblock
> >
> > I hope you'll ensure that users who are not using a mouse (e.g. people
> > with certain
> > motor disabilities) can still access the content linked in the child items,
> > whether via deeper links on hub pages reached via parent items or by
> > ensuring
> > that child menus are focusable and visible on focus.
> >
>
> Furthermore, you should get rid of all display:none in your inline style and
> in the CSS.
>
> <ul style="display: none;">
> #nav ul {display:none;}
>
> These two essentially are the same. I am assuming the menu is controlled by a
> javascript, best practise is to use the absolute positioning to control
> submenu and use the toogle or mouseover to trigger the sub-level. Judging
> from the #nav ul, it seems to be the case, but the display none overwrites
> the rule below.
>
> #nav ul {position:absolute; left:0; top:30px; background:none; width:auto;
> border-top:solid 1px #000000; height: 0px}
>
> tee
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> *******************************************************************
>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
