Change vertical menu into horizontal, please help!

[Bluefame_Designer]

Hello there,

I hope someone can help me with the following problem.
I have took this menu

http://www.dynamicdrive.com/style/cs...ocks-menu/P30/

and I really appreciate it, but how can I simply change it into a horizontal menu? I tried a lot of things but nothing works so please help me out.

Or maybe this would be even better, is it possible to make this menu into a dropdown-onclick menu?

Thanks in advance

Blueflame

[Nile]

I got it to work in FF, can't get it to work in IE. Sorry.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#blueblock{
width: auto;
border-right: 1px solid #000;
padding: 10px;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}
#blueblock a{
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 900px;
}

html>body #blueblock a{ /*Non IE6 width*/
width: auto;
}

#blueblock a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

</style>

</style>
<div id="blueblock">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com/">CSS Drive</a>
<a href="http://www.dynamicdrive.com/forums/">Forums</a>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>

[Bluefame_Designer]

Thanks, I tried it and its just wider, the links and thinks are still vertical.
I just want the original menu horizontal.

so not like :

aaaaaaaa
bbbbbbbb
cccccccc

but more like this :

aaaaaaaa bbbbbbbb cccccc

[Nile]

I told you it only works in FF, I can't figure out how to make it work in IE. :-(

[ReadyToLearn]

Hi Bluefame...

It's fairly easy to make it in a horizontal menu.

You just need to delete some CSS.

First, take out all the mentions of a "width". You're going to want your menu to span your page not be restricted to the 180px in the current version.

Next, we need to tell the <li> elements to lay in-line with each other, instead of stack top to bottom. So, add display:inline to #blueblock li.

After that, we'll need to tell the anchor elements to follow suit. So, remove display:block from the #blueblock li a decleration.

Last, let's remove the light blue background because it looks messy -- remove background-color: #90bade; from #blueblock.

That's it No need to mess with the HTML.
If you want to remove the space between the menu items, add float:left to #blueblock li.

Below are all the changes that I suggest. Deletions are in red...additions in green.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
display:inline;
float:left;  /* Optional.  Removes space between menu elements */
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>

[Medyman]

Ahh...the power of CSS

Whenever you're trying to something like this, you need to figure out if the HTML is dictating layout. For example, which elements are nested within each other, etc.. etc..

In this case, there is no inherent HTML coding that would dictate a vertical vs. horizontal menu.

Of course, lists are, by design, supposed to be vertical. But that's nothing that CSS can't overcome.

So, if the answer to the question is no -- focus on the CSS. Don't try to create messy workarounds with HTML.

Just some friendly advice

ReadytoLearn's CSS should work well for you, Bluefame_Desginer. If you're already invested in Nile's approach (though as I just got done explaining, I wouldn't recommend it), maybe removing the IE hack will make it work in IE

Cheers