Multi column drop down menu help

HTML & CSS
1

hi all

i used the multicolumn dropdown menu from Paul’s website examples

http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm

Now i want to modify it according to my needs :

  1. I want to increase width for “SERVICES” drop down menu and make it 3 column
  2. I want to make “CONTACT” Drop down menu right aligned so that it stays within the layout.

So do i have to repeat all the “css” and modify it for every drop down menu.

here is my example where contact dropdown is moving out of layout
http://wdpixels.com/coding/dropdown-fullwidth2.htm

vineet

2

Try changing the following widths from 300px to 450px:

#nav li ul {
position: relative;
margin-left: -999em;
left: 0;
width: [COLOR="#FF0000"]450px[/COLOR];
border-top: 1px solid red;
}

#nav li ul li {
width: [COLOR="#FF0000"]450px[/COLOR];
border: 1px solid red;
border-top: none;
background: #06C;
float: left;
padding: 2px;
}
3

hi ralph

You code increases width for all dropdown menus.
I want to increase width for only 1 menu.

vineet

4

O well, just give that services ul a special class (class=“services”):

#nav li ul.services {
width: 450px;
}

#nav li ul.services li {
width: 450px;
}

Edit: actually, do this:

#nav li ul.services {
width: 450px;
}

#nav li ul.services [COLOR="#FF0000"]>[/COLOR] li {
width: 450px;
}

(One minor but important change.)

5

hi ralph

now the width is fine for “SERVICES” but it goes out of the layout

http://wdpixels.com/coding/dropdown-fullwidth2.htm

How can i center align it or right align it like the screenshot below

http://wdpixels.com/coding/centermenu.gif

vineet

6

Another problem i noticed is that z-index doesnt works.

the menu laps over the content

see this link
http://wdpixels.com/coding/dropdown-fullwidth2.htm

vineet

7

Those drop lists should be position: absolute rather than relative. See Paul’s original example.

8

ok thanks

9

hi

How can i split the “CLIENTS” list Drop down menu into 4 columns.

It is a list of around 30 clients.

http://wdpixels.com/coding/clients_1ul.htm

all clients are inside single <ul></ul>

vineet

10

It’s the same principle as for the Services drop down. Just repeat what you did there, with separate <ul>s for each column, and set the container widths to something like 600px.

11

hi ralph

If i have to do it with single <ul></ul> then what will be the solution

vineet

12

Not so easy. But why this restriction, given that you were able to do it with the Services items.

You could float all of the List items, but their order would flow in rows rather then columns.

13

hi ralph

i added this, but list items doesnt float left


#nav li ul.clients > li li {
float:left;
}

http://wdpixels.com/coding/clients_1ul.htm

vineet

14

You didn’t increase the width of the ul so that they can float:

#nav li ul.clients ul {
position: relative;
float: left;
[COLOR="#FF0000"]width: 600px;[/COLOR]
margin: 0 5px 0 0;
display: inline;
top: 0;
border: none;
}
15

oh yes i forgot.

Thanks a lot Ralph.

All is well now

vineet

16

Cool. Glad you got it working. :slight_smile: