Creating new menu template (mega dropdownmenu) css

[msnijder]

Hi guys,

Just to make it myself and other people easier, am I trying to make a mega drop downmenu tempalte for CMS MS. I started to make the menu work 'hard coded' and already I came upon some problems.

Please take a look at: http://voison.nl/menu2/

I want the dropdown box to float all the way to the left instead of beginning below the parent. Is there somebody that can help me with that? I tried already so much and I just cant find the solution

I think the code should be edited here, because this is the div containing the sub ul and li items.

Code: Select all

/* STYLING SUB */

div#menuwrapper ul li div.sub {
	min-width:760px;
	position:absolute;
	background-color:#036;
	z-index:9999;
	padding:10px;
	display:none;
}

Thanks in advance!

[SideshowBob]

Hi msnijder,

I *think* you are trying to create what is often called a drop line menu although I can't be sure without a visual.

You can see quite a nice example here: http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/

If you are intending to show an dropdown vertical menu that is disconnected from its parent then I think this is a bad idea as it would be difficult/unnatural to use.

Bob

[msnijder]

Hi msnijder,

I *think* you are trying to create what is often called a drop line menu although I can't be sure without a visual.

You can see quite a nice example here: http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/

If you are intending to show an dropdown vertical menu that is disconnected from its parent then I think this is a bad idea as it would be difficult/unnatural to use.

Bob

Hey Bob

Thats not what I am planning to do. The only thing I want is that the dropdown div is exactly below my menu (take a look at www.voison.nl/menu2). In the current state, the submenu shows up below the active parent.

[owr_bgld]

ok - you can try following (if are right thoghts)


you have set it to absolute so where to beginn the div - I think there are the missing parameters for top (0 or 100?) and left (0?)

and maybe you also need to say postition: relative; in the div#menuwrapper, because the absolute position is relative (not mix up with position: relative) to his parent element.

[msnijder]

ok - you can try following (if are right thoghts)


you have set it to absolute so where to beginn the div - I think there are the missing parameters for top (0 or 100?) and left (0?)

and maybe you also need to say postition: relative; in the div#menuwrapper, because the absolute position is relative (not mix up with position: relative) to his parent element.

Yes got it! I found it out myself I was trying all the time.. but thx this was indeed the problem. I came back to this topic because I am stuck again. If you take a look now at http://voison.nl/menu2/, you see a pretty nice menu so far


Now this is the set-up:

Code: Select all

<ul>//parent
     <ul> //firstchild (gets h5-tag)
           <ul> //second child
           </ul>
      </ul>
</ul>

Now in the items 'industrial products' and 'contact' the style is nice (floated etc.), but only uses parent and firstchild with the first as an h5. What I need for the CMS is the firstchild as it is and the second child below (example 'custom made products') But because this is a third level UL, is doesn't float anymore and I don't understand why not

Damn this is really hard to explain. Perhaps the people who think they can help me, better look at the source The idea of what I want:

CHILD              <---- ul ul
Child of child    <----- ul ul ul
Child of child
Child of child
Child of child

then multiple of these ul's next to eachother.

Sorry that I can't explain it any better. Giving my best

[Dr.CSS]

That one has a w/o an ...