vinpkl
August 21, 2012, 7:52am
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 :
I want to increase width for “SERVICES” drop down menu and make it 3 column
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
ralphm
August 21, 2012, 8:19am
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;
}
vinpkl
August 21, 2012, 8:23am
3
hi ralph
You code increases width for all dropdown menus.
I want to increase width for only 1 menu.
vineet
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;
}
ralphm
August 21, 2012, 8:26am
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.)
vinpkl
August 21, 2012, 8:53am
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
vinpkl
August 21, 2012, 9:58am
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
ralphm
August 21, 2012, 10:28am
7
Those drop lists should be position: absolute rather than relative. See Paul’s original example.
vinpkl
August 22, 2012, 4:42pm
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
ralphm
August 22, 2012, 10:03pm
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.
vinpkl
August 23, 2012, 2:25am
11
hi ralph
If i have to do it with single <ul></ul> then what will be the solution
vineet
ralphm
August 23, 2012, 3:04am
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.
vinpkl
August 23, 2012, 4:00am
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
ralphm
August 23, 2012, 6:11am
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;
}
ralphm
August 23, 2012, 6:33am
16
Cool. Glad you got it working.