Dropdown menu Issue.HELP.

Hello Guys,

I created a vertical drop down menu and noticed that it's too long for a drop down, now I was thinking if there's a way that the drop down will appear or can be listed horizontally? Need help.
You can find it here: wwwdotprintingshoppersdotcom


Abbey

 

If, you have long drop down menu then, use mega menu. you can download source here http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

 

Hi creativewebmaster,

I already tried mega menu plugins but it affects the loading time of the site. How will I prevent this from occurring? Thank you for your help.

 

it's not worth using plugins for this. Why don't you put some styles like:

ul.sub-menu {
overflow:auto;
}

ul.sub-menu li{
display:block;
float:left;
}

You will also have to restructure your HTML for this. You will have to take the <ul> element out of it's containing division. I am not sure if you will want to do all that I am just trying to point you in the right direction. You are probably going to need to include more styles than this.

 

There are some techniques: http://rickbjarnason.com/creating-multi-column-lists-using-css/

for 3rd technique if you have a dynamic menu (if it changes often) go with css3 selectors (even & odd), if you use static menuitems then of course it's easier to have the class names written by yourself.

 

I'm just wondering why you posted this in Javascript, since unless you're talking scripting assist for IE6/earlier there is no reason for a dropdown menu to use scripting -- EVER.

You didn't really share what is in the menu, without content it is nigh impossible to tell you what the proper markup and CSS should be.

... and really if you have enough items in a dropdown that you need to make it multiple columns, you've got too damned much **** in your menu! This is really true if you start thinking mobile, where dropdown menus don't even work, which is why I've swung an axe at them on my own sites in favor of more conventional navigation.

Oh, and @gandalf117 -- floats are inherently display:block, there is no reason to ever say that on a float. It's why the IE hack of setting a float to display:inline to prevent margin doubling works -- it's ignored in all browsers in terms of making it 'inline', but for some reason makes IE stop stacking or doubling margins. The only display state that does ANYTHING to a float would be "display:none;"