anyone tell me how this is done please?

[dannykilla]

Hi,

I want to have a similar menu system as this site

http://www.rochenhost.com/

Where when you hover over the top menu item for example on the site's link above if I was to hover over "Hosting" I would see in the red section "Starter Plans" Multiple Hosting" and so on....
I was hoping some one could post some example code as I am a complete n00b!

Thanks
Danny

[Freshpeel]

It's basically a list:

<div id="nav">
	    				<ul>
	    					<li id="current"><a href="http://www.rochenhost.com/" id="active">Home</a>

	    						<ul>
	    							<li>&nbsp;</li>
	    						</ul>
                            </li>
	    					<li><a href="hosting/">Hosting</a>
	    						<ul>
	    							<li><a href="hosting/">Starter Plan</a></li>
	    							<li><a href="hosting/multiple/">Multiple Domain Hosting</a></li>

	    							<li class="last"><a href="hosting/compare/">Compare Plans</a></li>
	    						</ul>
	    					</li>
	    					<li><a href="resellers/">Resellers</a>
	    						<ul>
	    							<li><a href="resellers/">Reseller Hosting</a></li>
	    							<li class="last"><a href="resellers/features/">Reseller Plan Features</a></li>

	    						</ul>
	    					</li>
	    					<li><a href="managed/virtual/">Managed</a>
	    						<ul>
	    							<li><a href="managed/virtual/">Managed Virtual Server</a></li>
	    							<li class="last"><a href="managed/">Managed Servers</a></li>
	    						</ul>

	    					</li>
	    					<li><a href="affiliates/">Affiliates</a>
     						    <ul>
     							    <li class="last"><a href="affiliates/affiliate-program/">Affiliate Program</a></li>
     						    </ul>
                            </li>
	    					<li><a href="about/">About</a>

	    						<ul>
	    							<li><a href="about/">Corporate Overview</a></li>
	    							<li><a href="about/management/">Team Rochen</a></li>
	    							<li><a href="about/support/">Support Committment</a></li>
	    							<li class="last"><a href="about/infrastructure/">Infrastructure Committment</a></li>
	    						</ul>
	    					</li>

	    					<li><a href="contact/">Contact</a>
	    						<ul>
	    							<li>&nbsp;</li>
	    						</ul>
                            </li>
	    					<li><a href="https://signup.rochen.com/" class="last">Order</a>
	    						<ul>
	    							<li>&nbsp;</li>

	    						</ul>
                            </li>
	    				</ul>
	    		</div>

There are styles for the ul, li, that make the menu work like that.

Here's the CSS to style the list:

/* Positioning */
#nav {position: absolute;bottom: 24px;right: 3px;margin: 0;}
	#nav ul {margin: 0;padding: 0;}
		#nav li {margin: 0;padding: 0;float: left;}
			#nav li a {float: left;display: block;}
			#nav li a:hover, #nav li a#active, #nav li:hover a, #nav li.iehover a {margin-bottom: 0px;}

			#nav li ul {margin: 0;padding: 0;position: absolute;bottom: -23px;left: -8px;list-style: none;display: none;}
			#nav li#current ul{display: block;z-index: 50;}
			#nav li:hover ul, #nav li.iehover ul{display: block;z-index: 60;}
/* @end */
/* common styling */
#nav ul {list-style: none;text-transform: uppercase;}
    #nav ul li {font: normal 12px Arial, Helvetica, sans-serif;}
        #nav ul li a {padding: 5px 23px 5px 22px;color: #FFF;text-decoration: none;border-top: 1px solid #4C7CC3;border-bottom: 1px solid #CCC;background: #039 url(../images/nav-bg.png) top right no-repeat;font-weight: bold;letter-spacing:0.45px;}
        #nav ul li a:hover,
        #nav ul li a#active,
        #nav ul li:hover a,
        #nav ul li.iehover a {border-top: 1px solid #CB4B4B;border-bottom: 1px solid #A31915;margin-bottom: 0px;background: #A31915 url(../images/nav-current-bg.png) top right no-repeat;}
        #nav ul li a.last {background: #039 url(../images/nav-last-bg.png) top right no-repeat;}
        #nav ul li a.last:hover,
        #nav ul li:hover a.last,
        #nav ul li.iehover a.last {border-top: 1px solid #CB4B4B;border-bottom: 1px solid #A31915;margin-bottom: 0px;background: #A31915 url(../images/nav-last-hover.png) top right no-repeat;}
            #nav ul li ul {width: 715px;text-transform: none;background-color: transparent;}
                #nav ul li ul li a {padding: 6px 8px 5px 8px;text-decoration: none;border: none;background: url(../images/subnav-bg.png) transparent 100% 50% no-repeat;font-weight: bold;font-size: 90%;}
                #nav ul li ul{height: 22px;border-bottom: 1px #CCC solid;}
                #nav ul li#current ul{background: #A31915;}
                #nav ul li:hover ul,
                #nav ul li.iehover ul{display: block;z-index: 60;background: #A31915;}
                    #nav ul li:hover ul li a,
                    #nav ul li.iehover ul li a,
                    #nav ul li#current ul li a {padding: 5px 8px 5px 8px;text-decoration: none;border: none;background: url(../images/subnav-bg.png) transparent 100% 50% no-repeat;font-weight: bold;font-size: 90%;}
                    #nav ul li ul li a:hover,
                    #nav ul li.iehover ul li a:hover {border: none;color: #FF9;background: url(../images/subnav-bg.png) transparent 100% 50% no-repeat;}
                    #nav ul li ul li.last a,
                    #nav ul li ul li.last a:hover,
                    #nav ul li#current ul li.last a,
                    #nav ul li.iehover ul li.last a:hover {background: none;}
/* @end */

[TheJoshMan]

@Freshpeel:

I hardly think that just copying the source of that site and posting it up for "danykilla" to freely use is going to "teach" them anything. (other than maybe how to "steal" someone else's creative ideas.)

Why not give them more of a "sample" of how to implement a navigation system with a similar structure rather than ripping off the one from that site.

Geez, people never cease to amaze me. Why do I feel like no one wants to take any time or initiative to get what they want anymore?

[Medyman]

I was hoping some one could post some example code as I am a complete n00b!

Dynamic Drive has several examples of these types of menus in the CSS library. Here are 5 of them.

Why do I feel like no one wants to take any time or initiative to get what they want anymore?

Because it's so easy to get by without working! How many members here clamor to create scripts for people from scratch? So, I think half the answer is that we (at least in the context of these forums), are enabling such laziness. If you're getting something ready-made for free, why not take it instead of fidgeting with code?

[TheJoshMan]

because you LEARN nothing...

because you are predestined for FAILURE from the get-go that way...

You will be constantly plaguing forums across the net with simple relatively easy to solve problems that could have been prevented HAD YOU fiddled with code...

[Medyman]

because you LEARN nothing...
because you are predestined for FAILURE from the get-go that way...
You will be constantly plaguing forums across the net with simple relatively easy to solve problems that could have been prevented HAD YOU fiddled with code...

I was being facetious. You're preaching to the choir on this one. My point was as long as there are people that will post code or write scripts for free w/o attempting to teach or inform, there will be people that take advantage of this. For example, the OP here didn't ask for someone to do it for them. But someone thought it wise to just post the code. Then the OP comes back, thinks "awesome! someone did it for me" and goes off on his way. Can you really blame him then?

I mean all of the above as an example. I mean no disrespect towards anyone and make no assumptions as to your intentions.

[TheJoshMan]

i know you meant no harm.

I guess it just "irks" me that people would rather spend ungodly amounts of time in a forum asking for help with something they didn't take the time to learn in the first place.

[dannykilla]

Hi,

I have tried the code and it hasnt appeared how I thought it would do?
You can see what I mean here,

http://www.bcguild.eu/forums

I want it positioned in the center at the top, I have created an image to show what I mean!
If anyone could please help me just position this how I want that would be awesome!
Also I don't want to copy anyone but I am new to this CSS and HTML stuff and I really like this menu system and I have tried to create one myself and as you can imagine it didn't turn out lol.

So if anyone can just help me centre this menu I would really appreciate it!

Thanks
Danny

[SpOrTsDuDe-Reese]

My god I don't say this often but please STFU!

Noone wants to hear your bickering honestly.


Give the <li> that holds the top level a float:left; list-style:none;

Go from there.

[TheJoshMan]

someone wake up on the wrong side of the futon today?