View Full Version : Horizontal CSS Menus with submenu

06-16-2006, 08:52 AM
Horizontal CSS Menus with submenu

This is my personal version of Horizontal menų with sottomenų that comes visualized when the tab it comes cliccato. Tested on win: Work 8,54, Firefox 1,5, IE 6,0, IE 5.5

Demo free to use:

06-16-2006, 01:34 PM
Can you post your CSS or attach the stylesheet so we can see how you did this?

06-16-2006, 02:18 PM

06-16-2006, 02:23 PM
When I click that link it takes me here: http://home.altervista.org/site/ ?

06-16-2006, 02:24 PM
Maybe some kind of hotlink protection?

body{font: 100.01% "Trebuchet MS",Arial,sans-serif}

/******************************* Tabs */
div#header {background: #E6F2F2; margin: 0; padding: 0;}
div#sfondo {background: #CEE7E7; height: 1.5em; margin: 0.5em}
div#menu{background: #E6F2F2;padding: 0; margin: 0; position: relative; border-bottom: 1px solid #787878;}
div#menu ul{list-style-type: none;margin: 0;padding:0;}
div#menu li{display: inline;margin: 0;padding:0}
div#menu li a{text-decoration: none;border: 1px solid #787878; padding: 0px 0.3em;
background: #ccc;color: #036;}
div#menu li a:hover{background-color: #f0f0f0}
div#menu li#attiva a{border-bottom: 1px solid #CEE7E7;background-color: #CEE7E7;color: #603;}

/************************* sottomenu */

#menu li#attiva li a {
border: none;
margin-left: 0.5em;


#menu li ul {
display: none;


#menu li#attiva ul {
width: 100%;
height: 2em; /*opera, firefox*/
line-height: 2em;

display: block;
margin: 0;
padding: 0;
position: absolute;

top: 1.5em;
left: 0;
border-bottom: 1px solid #787878;
background-color: #CEE7E7;


/***************************** contenuti */

h1 {
margin: 0 0.5em;
padding: 0;

#contenuti {
margin: 2em 0.5em;
padding: 10px;


06-16-2006, 02:32 PM
So, the sublevel text is pulled in from external html files?

06-16-2006, 02:36 PM
Not insofar as I can tell, no. The "menu levels" are just all totally seperate HTML files.

06-16-2006, 02:39 PM
Ok, cool idea...

06-16-2006, 02:59 PM
Not really, it's rather inefficient, and exceedingly difficult to do when one wants the menu across different pages, especially without server-side scripting.

06-17-2006, 06:44 AM
hello boys, if tried the menu, can indicate the browser that used? Thanks

06-17-2006, 10:19 AM
Firefox... not that it matters, this will probably work in every modern browser.

03-16-2008, 06:59 AM
hello boys, if tried the menu, can indicate the browser that used? Thanks

The example link is not working. Could somebody please update the link and how it works please or at least a working example and code.


09-12-2008, 03:56 PM
any updates?