PDA

View Full Version : mega drop down menu - can't line up the ul's



Daniel_kent_Uni
Jan 11th, 2011, 05:42 PM
Hello all,

I'm currently working on a mega drop down menu for my website in my final year project at uni and am having a problem with with the lists within the drop down and getting them to line up side by side.

I'm trying to create a drop down that looks like this:

http://i83.photobucket.com/albums/j289/blyfo/coding_forum_example.jpg

Notice the "columned" lists.

Mine however looks like this:

http://i83.photobucket.com/albums/j289/blyfo/coding_forum_example_2-1.jpg

The second list "Classic" should be to the immediate right of Vector. I've been trying for days with all sorts of changes to the CSS and directly to the <li> and <ul> tags in the HTML, such as "Display: inline" "Display: inline-block", tried floating the li and ul tags to the left and right aswell.

I've been searching everywhere for the past week or so for solutions to this but can't find a thread or post that has the solution i need, checked threads "CSS Multi Column List" and "How to put two <li> lists side by side. Semantically." here at the CodingForums.

In the lists side by side thread a user called Excavator postd with a solution using Float:Right; however i have tried this with my code and cannot get it to work.

Would anyone be able to help me with this problem please?

If it helps at all the tutorial that helped get me this far is below, I don't know how he's done it but i went though all of his CSS that i could understand and still can't figure out why his lists line up in a row

http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

p.s I only put the ( style=" padding-top:100px;" ) in the Vector list so you could see that there were two lists there, other one gets overlapped.

Sorry about the long post, any help greatly appreciated and any more info about my lists, just ask and i'll reply asap. Thanks

Dan.


<ul id="cssdropdown">
<li class="headlink" style=" float: left; width:138px; height: 32px; background-image:url(assets/images/artBtn.jpg); text-align:center;">
<a href="home.html"></a>
<ul>
ART
<li style=" padding-top:100px;"><a href="http://google.com/">Vector</a></li>
<li><a href="http://google.com/">Vector</a></li>
<li><a href="http://google.com/">Vector</a></li>
</ul>
<ul>
<li><a href="http://google.com/">Classic</a></li>
<li><a href="http://google.com/">Classic</a></li>
<li><a href="http://google.com/">Classic</a></li>
</ul>
</li>
</ul>



li.headlink a
{
/* directly change navigation text */
font-family: Arial, Helvetica, sans-serif;
padding-top: 10px;
text-decoration:none;
color:#FFF;
}


li.headlink ul
{
/* controls aspects of drop down menu */
display: none;
background: #607181 url(assets/images/sub_bg.jpg);
background-repeat:repeat-x;
margin-top: 32px;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
padding: 30px;
position:absolute;
color:#30C;
}

li.headlink ul a
{
/* directly change links/text inside list */

list-style-image:none;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}


li.headlink ul
{
float:left;
}

li.headlink ul li
{
/* directly change list */
list-style-image:url(assets/images/ListMark.jpg);
text-align:left;
}

ul#cssdropdown
{
font-size: 0.9em;
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
}

li.headlink:hover ul
{
display:block;
}

Excavator
Jan 11th, 2011, 06:14 PM
Hello Daniel_kent_Uni,
In the example you are following the child ul's are not really children at all. They are dropped in a <div class="sub"> and .sub is controlled with a javascript.

Sorry but your menu isn't really even close to the example your following. It will take more than CSS to get it to work - study his markup a little more and you will need the js as well.

Daniel_kent_Uni
Jan 11th, 2011, 11:11 PM
Hi Excavator, thanks for the reply.

Ahh I see, so to get the lists in a row he has used JS? this makes more sense now, I was having trouble following the tutorial so I decided to try and get the basic layout of the drop down menu working but couldn't get the columned lists to work so maybe thats why.

So would you say that its not really possible to setup my "Art" drop down lists like so, only using CSS?

Art

Classic Vector
Classic Vector
Classic Vector

I noticed that both lists are creating their own repeated background which meant they weren't really within the same list as I wanted, rather they were both making their own hence the overlapping. So somehow I need to put them both in the same ul that will create the repeated background once for the ul?

Thanks for the help Excavator, Dan.

Excavator
Jan 11th, 2011, 11:14 PM
Well, to get a CSS only version working you would need to change a few things. Have a look at some that google finds (http://www.google.com/search?q=css+only+mega+drop&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1).

Daniel_kent_Uni
Jan 11th, 2011, 11:21 PM
Thanks, i'll get the CSS one working first.

Dan.