centrer menu horizontal deroulant

[thieb03]

Bonjour, je n'arrive pas à centrer un menu horizontal, j'ai fouillé un peu partout, j'ai trouvé des explications et des tuto, mais j'suis trop nul, je n'arrive pas à adapter à ma structure, bref le boulet ! Y aurait-il une âme de bonne volonté sur Webrankinfo.

Voila ce que j'obtiens sur mon fichier test html : http://www.thieb03linux.fr/indexsauvegarde+test.html
mon css (pléthorique il va falloir que j'élague)

Code: Tout sélectionner

html {
  background-position:  center center;
  background-attachment: fixed;
}
body {
  background-position:  center center;
  background-image: url(backgroundxxx.jpg);
  min-width: 1120px;
}
div#header {
  background-color: transparent;
  background-position: center bottom;
  background-image: url(backgroundxxx.jpg);
  font-size: 10pt;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
h1 {
  border:  none;
  background-image: url(backgroundxxx.jpg);
  background-position: left top;
  font-size: 26pt;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  text-decoration: none;
  background-repeat: repeat;
}
div#colonne1 {
  border:  none;
  margin: auto;
  overflow: visible;
  background-repeat: repeat;
  background-position: center bottom;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  background-color: #fbfbfb;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  font-size: 10pt;
  float: left;
  visibility: visible;
  clear: left;
  width: 167px;
}
div#colonne2 {
  border:  none;
  background-color: #fbfbfb;
  background-repeat: repeat-x;
  background-position: left bottom;
  width: 167px;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
  -moz-border-radius-bottomleft: 1em;
  margin-top: 0px;
  margin-left: 0px;
  font-size: 10pt;
  float: right;
  max-height: 1636px;
  min-height: 1005px;
}
div#global {
  background-image: url(beige015.gif.png);
  font-size: 11pt;
}
div#centre {
  margin-right: 175px;
  margin-left: 175px;
  background-position: right center;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  padding-left: 10px;
  background-image: url(beige015.gif.png);
  font-weight: normal;
  background-repeat: repeat;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  padding-right: 10px;
  font-style: normal;
}
table {
  border-collapse: collapse;
  width: 90%;
}
th, td {
  border: 1px solid black;
  width: 20%;
}
td {
  text-align: center;
}
caption {
  font-weight: bold;
}
div#footer {
  border-style: none;
  border-color: -moz-use-text-color;
  background-color: transparent;
  background-image: url(backgroundxxx.jpg);
  background-repeat: repeat;
  background-position:  center center;
  speak: normal;
  font-size: 10px;
  margin-right: -11px;
  margin-left: -11px;
  margin-bottom: -38px;
}
.pd_menu_01 {
  border: 1px solid #004080;
  padding: 0;
  background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
  margin-right: 0;
  margin-bottom: 0;
  float: left;
  color: #ffcc00;
  width: 100%;
}
.pd_menu_01 a, .pd_menu_01 a:visited {
  font-family: Arial,Helvetica,sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: #ffcc00;
  background-color: #0000a0;
  text-decoration: none;
}
.pd_menu_01 ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #ffcc00;
}
.pd_menu_01 ul li {
  border-left: 1px solid #004080;
  border-right: 1px solid #004080;
  float: left;
  position: relative;
  z-index: auto ! important;
  color: #ffcc00;
}
.pd_menu_01 ul li a {
  padding: 0 10px;
  background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll 0% 50%;
  color: #ffcc00;
  float: none ! important;
  display: block;
  height: 35px;
  line-height: 30px;
  text-decoration: none;
}
.pd_menu_01 ul li ul {
  border:  none;
  background: #0000a0 none repeat scroll 0% 50%;
  display: none;
  color: #ffcc00;
  width: 1px;
}
.pd_menu_01 ul li:hover a {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li:hover ul {
  display: block;
  position: absolute;
  z-index: 999;
  top: 29px;
  margin-top: 1px;
  left: 0;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 0px 10px;
  display: block;
  width: 12em;
  height: 35px;
  line-height: 1.3em;
  margin-left: -1px;
  background-color: #0000ff;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover ul {
  display: block;
  width: 12em;
  position: absolute;
  z-index: 999;
  top: 29px;
  left: 0;
}
.pd_menu_01 ul li ul li a:visited {
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 4px 16px;
  display: block;
  width: 12em;
  height: 1px;
  line-height: 1.3em;
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}

.pd_menu_01 {
border: 1px solid #004080;
padding: 0;
background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
margin-right: 0;
margin-bottom: 0;
float: left;
color: #ffcc00;
width: 100%;
}
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-weight: bold;
font-size: 12px;
color: #ffcc00;
background-color: #0000a0;
text-decoration: none;
}
.pd_menu_01 ul {
margin: 0;
padding: 0;
list-style-type: none;
color: #ffcc00;
}
.pd_menu_01 ul li {
border-left: 1px solid #004080;
border-right: 1px solid #004080;
float: left;
position: relative;
z-index: auto ! important;
color: #ffcc00;
}
.pd_menu_01 ul li a {
padding: 0 10px;
background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll
0% 50%;
color: #ffcc00;
float: none ! important;
display: block;
height: 35px;
line-height: 30px;
text-decoration: none;
}
.pd_menu_01 ul li ul {
border: none;
background: #0000a0 none repeat scroll 0% 50%;
display: none;
color: #ffcc00;
width: 1px;
}
.pd_menu_01 ul li:hover a {
background-color: #008000;
text-decoration: none;
color: #ffff00;
}
.pd_menu_01 ul li:hover ul {
display: block;
position: absolute;
z-index: 999;
top: 29px;
margin-top: 1px;
left: 0;
color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a {
border-left: 1px solid #004080;
border-bottom: 1px solid #004080;
padding: 0px 10px;
display: block;
width: 12em;
height: 35px;
line-height: 1.3em;
margin-left: -1px;
background-color: #0000ff;
color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a:hover {
background-color: #ca0000;
text-decoration: none;
color: #ffff00;
}
.pd_menu_01 ul li a:hover {
background-color: #008000;
text-decoration: none;
color: #ffff00;
}
.pd_menu_01 ul li a:hover ul {
display: block;
width: 12em;
position: absolute;
z-index: 999;
top: 29px;
left: 0;
}
.pd_menu_01 ul li ul li a:visited {
background-color: #0000ff;
color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a {
border-left: 1px solid #004080;
border-bottom: 1px solid #004080;
padding: 4px 16px;
display: block;
width: 12em;
height: 1px;
line-height: 1.3em;
background-color: #0000ff;
color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a:hover {
background-color: #ca0000;
text-decoration: none;
color: #ffff00;
}


Code: Tout sélectionner

et mon html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>




 
  <meta name="msvalidate.01" content="593E9A7CB46136FCC0C31A566F76169C" /><title>thieb 03 mandriva linux</title>
 

 
 
  <meta content="text/html; charset=utf-8" http-equiv="content-type" />

 
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

 
  <meta content="thieb03" name="author" />

 
  <meta name="description" content="découverte de linux mandriva et de l'open source, aide et tuto,fonds d'ecran,humour ,dernières news et actualite" />

 
  <link rel="SHORTCUT ICON" href="favicon.ico" />

 
  <meta name="google-site-verification" content="IEXfN06mB98aZhlnsUaJed8Myz_vISaL4M4NZgAaR6k" />

 
  <meta name="y_key" content="84d0836c3cd3d52f" />

 
  <meta name="alexaVerifyID" content="ONuwC6HLlHxxFdJ2DrFgchVukro" />

 
  <meta name="msvalidate.01" content="9A2F68FCE2D95F1555D031495FEDCBC8" />

 
  <meta name="alexaVerifyID" content="n4X-QWw-2bC2bGVuH0Tx3e2gJ3w" />

 
  <meta name="y_key" content="95fa68a80b76ed91" />

 
  <meta name="keywords" content="linux mandriva, open source, wallpapers, fonds d ecran, humour linux, dernières news linux et open source, tutoriels, aide, webmaster, logiciels open source, applications open source, slide show, diaporama, zenphoto, kompozer, libre" />

 
  <link rel="alternate" type="application/atom+xml" title="Feed" href="http://page2rss.com/rss/7d68b0f2b1378faafd3bf14bc75cc32d" />

 
 

 
  <link rel="stylesheet" href="style1.css" type="text/css" /></head><body>
<?php include_once("analyticstracking.php") ?>
<script language="JavaScript" type="text/javascript" src="http://webmasters.abondance.com/actu-abondance.php">
  </script>
<div id="header">
<div style="text-align: center;"><big style="font-weight: bold;"><br />
</big> <big style="font-weight: bold;"><br />
</big>
<h1 style="color: rgb(255, 204, 0);"><span style="font-style: italic;"><span style="font-weight: bold;"><img style="width: 50px; height: 50px;" alt="" src="28739-mandriva-logo_371f6a85ae43c220b9b4915e929b4b54.png" /><img style="width: 48px; height: 49px;" alt="" src="mandriva-tux_normal.gif" /></span></span>thieb
03
mandriva linux actualité<img style="width: 48px; height: 49px;" alt="" src="mandriva-tux_normal.gif" /><img style="width: 50px; height: 50px;" alt="" src="28739-mandriva-logo_371f6a85ae43c220b9b4915e929b4b54.png" /></h1>
<span style="color: rgb(255, 204, 102);">
</span><span style="color: rgb(255, 204, 102);">
<div class="pd_menu_01" align="center">
<ul>
  <li>
    <div><a href="http://www.thieb03linux.fr/">Accueil et News</a></div>
  </li>
</ul>
<ul>
  <li>
    <div><a href="http://www.thieb03linux.fr/aide%20et%20tuto%20thieb%2003.html">Aide
et Tuto</a></div>
  </li>
</ul>
<ul>
  <li>
    <div><a href="http://www.thieb03linux.fr/humour.html">Humour Linux</a></div>
    <ul>
      <li><a href="http://www.thieb03linux.fr/zenphoto/humour%20image/">en
images</a>
     
        <br />
</li>
      <li><a href="http://www.thieb03linux.fr/humoursuite.html">Blagues
Linux</a>
   
    <br />
</li></ul>
  </li>
</ul>
<ul>
  <li><a href="http://www.thieb03linux.fr/videoslinux.html">Videos Linux</a>
  </li>
</ul>
<ul>
  <li><a href="http://www.thieb03linux.fr/wallpaperslinux.html">Wallpapers
Linux</a>
    <ul>
      <li><a href="http://www.thieb03linux.fr/zenphoto/%20fonds%20d%20ecran%201024x768%20et%201280x1024/">differentes
resolutions</a>

        <br />
</li>
      <li><a href="http://www.thieb03linux.fr/zenphoto/fonds%201920x1200/">1920x1200</a>
 
      <br />
</li><li><a href="http://www.thieb03linux.fr/zenphoto/linux%20girls/">Linux
girls</a>
 
      <br />
</li><li><a href="http://www.thieb03linux.fr/zenphoto/mandriva%20girls/">Mandriva
girls</a>
   
        <br />
</li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="http://www.thieb03linux.fr/detente.html">Detente apres
Linux</a> </li>
</ul>
<ul>
  <li><a href="http://www.thieb03linux.fr/partenaires.html">Partenaires</a>
  </li>
</ul>
</div>
<div class="c33" id="colonne1">
<div style="text-align: center;"><span style="color: rgb(255, 204, 102);"><br />
<img style="width: 55px; height: 55px;" class="c15" alt="" src="thieb03100.jpg" /><br />
</span></div>
<div style="text-align: center;" class="c32"><span style="color: rgb(255, 204, 102);"><span style="color: black; font-weight: bold;">Sites amis</span><br />
<br />
<a class="c18" href="http://www.fredmoy.fr">Fredmoy</a><a class="c18" href="http://www.fredmoy.fr"><br />
</a><br class="c19" />
<a href="http://bestfreewallpapers.net">Bestfreewallpapers.net</a><br />
<br class="c19" />
<small><br style="font-weight: bold;" />
<span style="color: black; font-weight: bold;">OUTILS POUR<br />
WEBMASTERS</span></small><br style="color: black;" />
<br />
<a class="c18" href="http://www.alsacreations.com/">Alsacréations</a><br />
<br />
<a class="c21" href="http://www.siteduzero.com/">Le site du
zero</a><br />
<br class="c24" />
<a class="c21" href="http://www.webrankinfo.com/">Webrankinfo</a><br />
<br class="c24" />
<a class="c21" href="http://www.rapidsitemap.com/">Rapidesitemap</a><br />
<br class="c24" />
<a class="c21" href="http://www.zenphoto.org/">Zenphoto</a><br />
<br />
<a class="c26" href="http://audit.abondance.com/">Abondance</a><br />
<br />
<a href="http://www.framasoft.net/rubrique2.html" rel="tag">framasoft</a><br />
<br class="c27" />
<a class="c26" href="http://cooltext.com/">Cooltext</a><br />
<br class="c27" />
<a class="c26" href="http://www.rankspirit.com/indexfr.php">rankspirit</a><br />
<br class="c27" />
<a class="c26" href="http://www.google.fr/ads/" rel="tag">Google
Adsense</a><br />
<br class="c27" />
<a class="c26" href="http://www.w3.org/">W3C</a><br />
<br class="c27" />
<a href="http://users.skynet.be/mgueury/mozilla/" rel="tag">HTML
validator</a><br />
<br class="c28" />
</span>
<h3 style="color: black;"><small>sites linux à
consulter</small><br />
</h3>
<a class="c26" href="http://www.pcinpact.com/s/linux.htm">PC
Impact</a><br />
<br class="c27" />
<a class="c26" href="http://www.mandrivalinux-online.org/">MLO</a><br />
<br class="c27" />
<a class="c26" href="http://wiki.mandriva.com/fr/">wiki
Mandriva</a><br />
<br class="c27" />
<a class="c26" href="http://www.lea-linux.org/" rel="tag">Lea
linux</a><br />
<br class="c27" />
<a href="http://www2.mandriva.com/fr/" rel="tag">Mandriva</a><br />
<br />
<a href="http://blog.mageia.org/fr/" rel="tag">Blog de
Mageia</a><br />
<br />
<a href="http://mageia.org/fr/" rel="tag">Mageia</a><br />
<br />
<br />
<span style="color: black; font-weight: bold;">Autres sites
intéressants</span><br style="color: black; font-weight: bold;" />
<br />
<a href="http://www.agoravox.fr/?auteur64414" onclick="window.open(this.href);return false;"><img style="border: 0px solid ; width: 85px; height: 24px;" alt="" src="http://www.agoravox.fr/squelettes/images/icone_redacteur3.gif" /></a><br />
<br />
</div>
</div>
<div id="colonne2">
<div class="c14"><br style="color: black;" />
<div style="text-align: center;">
<span style="color: black;">traduction du site</span><br />
<script language="JavaScript" src="http://www.traducteurenligne.net/traducteurgr/flags.js" type="text/javascript">
</script></div>
</div>
<div class="c14">
<div style="text-align: left;" class="c14">
<script type="text/javascript" src="http://geoloc15.geovisite.com/private/geoclock.js?compte=880350782146">
</script><noscript><a href="http://www.geovisite.com/fr/directory/informatique_logiciels.php" target="_blank"><img alt="logiciels" src="http://geoloc15.geovisite.com/private/geoclock.php?compte=880350782146" border="0" /></a></noscript></div>
<noscript>Please do not change this code for a perfect
fonctionality of y</noscript></div>
<div style="text-align: center;" class="c14"><a class="c35" href="http://www.cloudink.net/annuaire-logiciel.htm" title="Annuaire Logiciel sur cloudink">Annuaire Logiciel</a></div>
<div class="c14">
<div style="text-align: center;"><br />
<br />
<br />
<a href="http://www.waaaouh.com/annuaire/">Annuaire de qualité :
Waaaouh !</a><br />
<br />
<!-- Begin ShinyStat code -->
<script type="text/javascript" src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=thieb03">

</script><noscript><a href="http://www.shinystat.com/fr" target="_top"><img alt="classements sites" src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=thieb03" border="0" /></a></noscript><br />
<!-- End ShinyStat code --><br />
<a href="http://www.waaaouh.com/annuaire/fonds-d-ecran-et-goodies-c108-p1.html">
Waaaouh.com : Fonds d'écran et Goodies</a><br />
<br />
</div>
<div style="text-align: center;">
<script src="http://page2rss.com/button.js" type="text/javascript">
</script>
<script type="text/javascript">
page2rss_drawButton("http:\/\/page2rss.com\/rss\/7d68b0f2b1378faafd3bf14bc75cc32d",1,"actualit\u00e9 de thieb 03 mandriva linux");//
</script><noscript>RSS feed generated by <a href="http://page2rss.com/">Page2RSS</a></noscript>
<a href="http://www.supportduweb.com/topsite_vote-815.html"><img style="border: 0px solid ; width: 58px; height: 20px;" src="http://www.supportduweb.com/images/topsite/votez03.gif" alt="Votez pour ce site" /></a></div>
</div>
</div>
<div class="c50" id="centre">
<div class="c14"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<form action="http://www.google.fr/cse" id="cse-search-box" name="cse-search-box">
  <div><input name="cx" value="partner-pub-8174452465061303:rqp7mvc4s8i" type="hidden" /><input name="ie" value="UTF-8" type="hidden" /> <input name="q" size="31" type="text" /> <input name="sa" value="Rechercher" type="submit" /></div>
</form>
<script type="text/javascript" src="http://www.google.fr/cse/brand?form=cse-search-box&amp;lang=fr">
</script></div>
<div class="c14">
<div style="text-align: center;">
<script type="text/javascript">
//<![CDATA[
<!--
         google_ad_client = "pub-8174452465061303";
         /* 468x60, date de création 11/09/10 */
         google_ad_slot = "4762752399";
         google_ad_width = 468;
         google_ad_height = 60;
         //-->
//]]>
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br />
</div>
<br />
<br />
<div style="text-align: center; color: black;">
<h2><span class="c30">Bienvenue à tout ceux qui souhaitent
découvrir Linux et l'Open source</span></h2>
</div>
<span class="c30"><br />
</span>
<div style="text-align: center;"><!-- AddThis Button BEGIN --><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=thieb03"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" alt="Bookmark and Share" class="c38" height="16" width="80" /></a>
<script type="text/javascript">
//<![CDATA[
var addthis_config = {"data_track_clickback":true};
//]]>
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=thieb03">
</script><!-- AddThis Button END --></div>
<?php $cat[] = "accueil et news thieb 03"; $cat[] ="thieb03 pages html";
include 'news/index.php';
?>.
<div id="footer">
&nbsp;<a href="http://www.xiti.com/xiti.asp?s=483534%0A%20" title="WebAnalytics" target="_top"><br />
</a>
<div style="text-align: center;" align="justify"><span style="color: rgb(255, 204, 0);">&nbsp;©2009 - Thieb03 - Contact
-&nbsp;</span><a style="color: rgb(255, 204, 0);" href="formulaire.html"><img style="border: 0px solid ; width: 32px; height: 32px;" alt="contact thieb 03" src="mail_021.gif" /></a> <span style="color: rgb(255, 204, 0);">- Créé avec :</span> <a style="color: rgb(255, 204, 0);" href="http://www.kompozer.net/"><img style="border: 0px solid ; width: 80px; height: 15px;" alt="Document made with KompoZer" src="kompozer_80x15.png" /></a></div>
</div>
</div>
</div>
<br />
<br />
</div>
</span></div>
</div>

</body></html>

Le site publié sur le web n'utilise pas ce type de menu, mais un menu flash qui ne me convient pas car le menu déborde sur la droite sur des petites résolutions à cette adresse http://www.thieb03linux.fr.
help me please.

[smorge]

Salut,

j'ai pas le temps de regarder ton code en détail mais vite fait tu devrais peut-être essayer de virer le float : left et d'essayer avec un text-align : center ou un margin : auto ?

Code: Tout sélectionner

.pd_menu_01 {
  border: 1px solid #004080;
  padding: 0;
  background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
  margin-right: 0;
  margin-bottom: 0;
  float: left;
  color: #ffcc00;
  width: 100%;
}


[thieb03]

J'ai réussi à modifier le css grâce à une ame charitable, Spitfire95, grace à lui c'est mieux, mais maintenant je me retrouve avec le contenu du div#centre "centré" alors que je voudrais qu'il soit sur la gauche
css

Code: Tout sélectionner

html {
  background-position:  center center;
  background-attachment: fixed;
}
body {
  background-position:  center center;
  background-image: url(backgroundxxx.jpg);
  min-width: 1120px;
}
div#header {
  background-color: transparent;
  background-position: center bottom;
  background-image: url(backgroundxxx.jpg);
  font-size: 10pt;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
h1 {
  border:  none;
  background-image: url(backgroundxxx.jpg);
  background-position: left top;
  font-size: 26pt;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  text-decoration: none;
  background-repeat: repeat;
}
div#colonne1 {
  border:  none;
  margin: auto;
  overflow: visible;
  background-repeat: repeat;
  background-position: center bottom;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  background-color: #fbfbfb;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  font-size: 10pt;
  float: left;
  visibility: visible;
  clear: left;
  width: 167px;
}
div#colonne2 {
  border:  none;
  background-color: #fbfbfb;
  background-repeat: repeat-x;
  background-position: left bottom;
  width: 167px;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
  -moz-border-radius-bottomleft: 1em;
  margin-top: 0px;
  margin-left: 0px;
  font-size: 10pt;
  float: right;
  max-height: 1636px;
  min-height: 1005px;
}
div#global {
  background-image: url(beige015.gif.png);
  font-size: 11pt;
}
div#centre {
  margin-right: 175px;
  margin-left: 175px;
  background-position: right center;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  padding-left: 10px;
  background-image: url(beige015.gif.png);
  font-weight: normal;
  background-repeat: repeat;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  padding-right: 10px;
  font-style: normal;
  margin-top: 35px;
}
table {
  border-collapse: collapse;
  width: 90%;
}
th, td {
  border: 1px solid black;
  width: 20%;
}
td {
  text-align: center;
}
caption {
  font-weight: bold;
}
div#footer {
  border-style: none;
  border-color: -moz-use-text-color;
  background-color: transparent;
  background-image: url(backgroundxxx.jpg);
  background-repeat: repeat;
  background-position:  center center;
  speak: normal;
  font-size: 10px;
  margin-right: -11px;
  margin-left: -11px;
  margin-bottom: -38px;
}
.pd_menu_01 {
  border: 1px solid #004080;
  margin: 0 auto;
  padding: 0;
  background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
  color: #ffcc00;
  width: 1029px;
}
.pd_menu_01 a, .pd_menu_01 a:visited {
  font-family: Arial,Helvetica,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  color: #ffcc00;
  background-color: #0000a0;
  text-decoration: none;
}
.pd_menu_01 ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #ffcc00;
}
.pd_menu_01 ul li {
  border-left: 1px solid #004080;
  border-right: 1px solid #004080;
  float: left;
  position: relative;
  z-index: 1;
  color: #ffcc00;
  width: 145px;
}
.pd_menu_01 ul li a {
  padding: 0 10px;
  background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll 0% 50%;
  color: #ffcc00;
  display: block;
  height: 35px;
  line-height: 30px;
  text-decoration: none;
  width: 135px;
}
.pd_menu_01 ul li ul {
  border:  none;
  background: #0000a0 none repeat scroll 0% 50%;
  display: none;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover a {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li:hover ul {
  display: block;
  position: absolute;
  z-index: 999;
  top: 29px;
  margin-top: 1px;
  left: 0;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 0 10px;
  display: block;
  width: 12em;
  height: 35px;
  line-height: 35px;
  margin-left: -1px;
  background-color: #0000ff;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover ul {
  display: block;
  width: 12em;
  position: absolute;
  z-index: 999;
  top: 29px;
  left: 0;
}
.pd_menu_01 ul li ul li a:visited {
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 4px 16px;
  display: block;
  width: 12em;
  height: 1px;
  line-height: 1.3em;
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}

Je me demande si tout le css est vraiment nécessaire, enfin !
Si une autre âme charitable voulait bien donner quelques explications à un nul comme moi elle serait la bien venue, d'avance merci.

[thieb03]

Ok c'est bon avec un peu d'aide j'ai réussi à obtenir ce que je voulais, j'ai adapté le menu horizontal sur mon site http://www.thieb03linux.fr/ le post est a marquer comme résolu merci.