How to add menu with css

**Endowed** · 04-03-2010

I would like to add a menu with css, but even searching the web, all those that I find no way to integrate my stylesheet (it was not me who made this sheet)

This is my style sheet

HTML Code:

/* Applicable values by default on any page
--------------------------------------------------------------------------------------------------------*/
*{margin:0; padding:0; list-style:none;}
body{font:64% Arial, Helvetica, sans-serif; background:#DADADA; padding:45px 0 20px;}
a{text-decoration:none;color:#444;}
a:hover{color:#00a0fc;}
a img {border:0px none; }
 
h2{background:url('img/h2.jpg');height:34px;font-size:1.1em;text-align:right;position:relative;text-transform:uppercase;line-height:20px;font-family:Verdana;color:#2c5ab0; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0}
.tl{position:absolute;top:0;left:0;font-size:0}
.tr{position:absolute;top:0;right:0;font-size:0}
.clear{visibility:hidden;clear:both; min-height:1px}
 
/* Layout, Structure of Blocks
--------------------------------------------------------------------------------------------------------*/
#wrapper{width:1000px; margin: 0 auto}
 
#header{background:url('img/header.jpg');height:204px;margin-bottom:20px; position:relative}
 
#content{width:761px;float:right; padding:0 1px 20px 0;}
 
#sidebar{width:203px; padding-bottom:20px;}
 
#footer{background:url('img/footer.jpg') no-repeat;height:57px; clear:both; margin-top:20px}

/*  Content
--------------------------------------------------------------------------------------------------------*/
/**** Header ****/
#header h1{position:absolute;width:420px;height:50px;left:250px;top:60px; font-size:0}
#header h1 a{display:block;width:100%;height:100%;text-indent:-5000px;}
 
#header ul#toolbar{position:absolute;top:176px;left:202px;}
#header ul#toolbar li{float:left;}
#header ul#toolbar li a{display:block;width:116px;line-height:23px;margin-right:2px; text-transform:uppercase; text-align:center;color:#e5edf4;font-weight:bold;font-family:Tahoma;font-size:1.1em; letter-spacing:1px;}
#header ul#toolbar li a:hover{color:#c1c1f4;}
#header ul#toolbar li form#searchengine input{border:0px none;background:none}
#header ul#toolbar li form#searchengine input#q{width:93px; font-size:1.1em;margin:6px 0 0 7px;}
#header ul#toolbar li form#searchengine input#sub1{width:12px;height:14px; font-size:0;margin:-4px 0 0; vertical-align: middle; cursor:pointer;}

Next, I include a menu of the header as follows

HTML Code:

<li><a href="http://www.maxif1.com" title="Back to Home">Home</a></li>
<li>
	<a href="#" title="Coming soon on Maxif1.com">ticketing</a>
</li>
 
<li><a href="http://www.maxif1.com/Forum" title="Community MaxiF1, discuss of the F1, and all motorsports">forum</a></li>
<li><a href="http://www.maxif1.com/Forum/directory.php" title="Directory of motorsports">Directory</a></li>
<li><a href="aff_contact.php" title="Contact Webmaster">contact</a></li>

I want to have the menu on Ticket with different menu as Formula 1, Moto GP, A1 GP

But now I do not know how someone can help me or at least enlighten me on what to do

**!const** · 04-03-2010

In the header you must add this javascript

HTML Code:

<script type="text/javascript" language="javascript">
<!--
var timerID;
function showSSMenu(sMenu){
	var timeout = 2000;
	obj = document.getElementById(sMenu);
	obj.style.display = "block";
	timerID = setInterval(function(){hideSSMenu(sMenu);},timeout);
}
function hideSSMenu(sMenu){
	clearInterval(timerID);
	obj = document.getElementById(sMenu);
	obj.style.display = "none";
}
-->
</script>

Then your menu

Code:

<li><a href="http://www.maxif1.com" title="Back to Home">Home</a></li>
        <li><a onmouseover="showSSMenu('underMenu1');" href="#" title="Shortly on Maxif1.com">ticketing</a>
        	<div id="underMenu1">
                <ul>
                    <li><a href="#">Formula 1</a></li>
                    <li><a href="#">Moto Gp</a></li>
                    <li><a href="#">A1 GP</a></li>
                </ul>
            </div>
        </li>        
        <li><a href="http://www.maxif1.com/Forum" title="Community MaxiF1, discuss of the F1, and all motorsports">forum</a></li>
        <li><a href="http://www.maxif1.com/Forum/directory.php" title="Annuaire des sports mÃ©caniques">Directory</a></li>
        <li><a href="aff_contact.php" title="Contact Webmaster">contact</a></li>

and you must make a ptit addition to your css

Code:

#underMenu1{
	display:none;
}
#underMenu1 ul, #underMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#underMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}

**Endowed** · 04-03-2010

Hello, I just do what you say and it works almost. I put the code in case I made a mistake

Code:

*{margin:0; padding:0; list-style:none;}
body{font:64% Arial, Helvetica, sans-serif; background:#DADADA; padding:45px 0 20px;}
a{text-decoration:none;color:#444;}
a:hover{color:#00a0fc;}
a img {border:0px none; }
 
h2{background:url('img/h2.jpg');height:34px;font-size:1.1em;text-align:right;position:relative;text-transform:uppercase;line-height:20px;font-family:Verdana;color:#2c5ab0; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0}
.tl{position:absolute;top:0;left:0;font-size:0}
.tr{position:absolute;top:0;right:0;font-size:0}
.clear{visibility:hidden;clear:both; min-height:1px}
 
#underMenu1{
	display:none;
}
#underMenu1 ul, #underMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#underMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}
#wrapper{width:1000px; margin: 0 auto}
 
#header{background:url('img/header.jpg');height:204px;margin-bottom:20px; position:relative}
 
#content{width:761px;float:right; padding:0 1px 20px 0;}
 
#sidebar{width:203px; padding-bottom:20px;}
 
#footer{background:url('img/footer.jpg') no-repeat;height:57px; clear:both; margin-top:20px}

#header h1{position:absolute;width:420px;height:50px;left:250px;top:60px; font-size:0}
#header h1 a{display:block;width:100%;height:100%;text-indent:-5000px;}
 
#header ul#toolbar{position:absolute;top:176px;left:202px;}
#header ul#toolbar li{float:left;}
#header ul#toolbar li a{display:block;width:116px;line-height:23px;margin-right:2px; text-transform:uppercase; text-align:center;color:#e5edf4;font-weight:bold;font-family:Tahoma;font-size:1.1em; letter-spacing:1px;}
#header ul#toolbar li a:hover{color:#c1c1f4;}
#header ul#toolbar li form#searchengine input{border:0px none;background:none}
#header ul#toolbar li form#searchengine input#q{width:93px; font-size:1.1em;margin:6px 0 0 7px;}
#header ul#toolbar li form#searchengine input#sub1{width:12px;height:14px; font-size:0;margin:-4px 0 0; vertical-align: middle; cursor:pointer;}

And the code of my web page

Code:

<title>MaxiF1 - Trombinoscope drivers</title>
<style type="text/css">
@import "style_bis.css";
</style>
<link rel="stylesheet" href="script/css/lightbox.css" type="text/css" media="screen" />
	
	<script src="script/js/prototype.js" type="text/javascript"></script>
	<script src="script/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="script/js/lightbox.js" type="text/javascript"></script>
	<script type="text/javascript" language="javascript">
<!--
var timerID;
function showSSMenu(sMenu){
	var timeout = 2000;
	obj = document.getElementById(sMenu);
	obj.style.display = "block";
	timerID = setInterval(function(){hideSSMenu(sMenu);},timeout);
}
function hideSSMenu(sMenu){
	clearInterval(timerID);
	obj = document.getElementById(sMenu);
	obj.style.display = "none";
}
-->
</script>
</head>
 
<body>
<?
	include ("include/temps.php");
		$mt1 = microTime();
	include("config.php");
	?>
 <div id="wrapper">
 
 <!--=============== Header =================--> 
  <div id="header">
   <h1><a href="http://www.maxif1.com">MaxiF1.com</a></h1>
   
   <ul id="toolbar">
   <li><a href="http://www.maxif1.com" title="Retour Ã* l'accueil">accueil</a></li>
        <li><a onmouseover="showSSMenu('underMenu1');" href="#" title="Coming soon on Maxif1.com">ticketing</a>
        	<div id="underMenu1">
                <ul>
                    <li><a href="#">Formula 1</a></li>
                    <li><a href="#">Moto Gp</a></li>
                    <li><a href="#">A1 GP</a></li>
                </ul>
            </div>
        </li>        
        <li><a href="http://www.maxif1.com/Forum" title="Community MaxiF1, discuss of the F1, and all motorsports">forum</a></li>
        <li><a href="http://www.maxif1.com/Forum/directory.php" title="Directory of motorsports">Directory</a></li>
        <li><a href="aff_contact.php" title="Contact Webmaster">contact</a></li>
     <form id="searchengine" method="get" action="http://www.google.com/search" />
      <p>
       <input type="text" name="q" id="q" value="Research" onclick="this.value=''" />
       <input type="submit" id="sub1" value="" />
	<input type="hidden" name="sitesearch" value="maxif1.com" />
      </p>
     </form>
    </li>
   </ul>
  </div><!-- end #header -->

What happens is that the menu is still active and when it is active, I displaced orbits the Left menu

**!const** · 04-03-2010

it seems that my turn will be time between

Code:

#underMenu1{
	display:none;
}
#underMenu1 ul, #underMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#underMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}

to

Code:

.menu span, .ssmenu span {
  display:none;
}
 
.menu a, .ssmenu a {
  text-decoration:none;
  color:#FFFF00;
}
 
.menu {
  padding:0;
}
 
.ssmenu {
  padding:0;
}

in css

**Endowed** · 04-03-2010

Yes, I do not know why, I just put your css and it works almost. I always an offset with the search tab

And my menu goes above the first block of the page to solve it, would not be possible instead that any fall, aligned below the menu box office horizontally instead of vertically.

Thank you for your help, it was more than a week that I tried and it works almost there

Can you still give me a helping hand

**!const** · 04-03-2010

Code:

#underMenu1{
	display:none;
}
#underMenu1 ul, #underMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#underMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}