Menu en css 2X horizontal et W3C

Evanne -
RAD ZONE Messages postés 5362 Statut Contributeur - 20 nov. 2008 à 20:16

Bonjour,
Je n'arrive pas à réaliser un menu horizontal déroulant horizontal qui marche bien sous IE et mozilla.:))
quelqu'un pourrait-il me conseiller?
merci d'avance

Configuration: Windows XP
Firefox 3.0.4

Afficher la suite

2 réponses

Réponse 1 / 2
vdfinternet Messages postés 487 Statut Membre 40

Salut Evanne,

http://www.cssdrive.com/index.php/examples/

Tu trouveras tout ce qu'il te faut pour cliquer résolu !
0

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

???
je ne comprend pas trops ce que tu veux dire ??

c est ca que tu veux ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />    
    <title>RAD ZONE Webcreation     
    </title>    
    <meta name="author" content="http://radservebeer.free.fr" />    
    <meta name="generator" content="PSPad editor, www.pspad.com" />  

<style type="text/css" media="screen">
/*<![CDATA[*/
.rad_menu_01 {
        float: left;
        padding: 0;
        margin: 0;
        color: #FFFFFF;
        background: #0000A0;
        width: 100%;
        border: solid 1px #004080;
        clear: both;
}
/*Color navigation bar normal mode*/
.rad_menu_01  a, .rad_menu_01 a:visited {
        font-family: Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: bold;
        font-size: 12px;
        color: #FFFFFF;
        background-color: #0000A0;
        text-decoration: none;
}
.rad_menu_01 ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
}
.rad_menu_01 ul li {
        float: left;
        position: relative;
z-index: auto !important
/*Non-IE6*/
        ;
z-index: 1000
/*IE6*/
        ;
        border-right: solid 1px #004080;
}
.rad_menu_01 ul li a {
        color: #FFFFFF;
        background: #0000A0;
float: none !important
/*Non-IE6*/
        ;
float: left
/*IE-6*/
        ;
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 10px;
        text-decoration: none;
}
.rad_menu_01 ul li ul {
        display: none;
        border: none;
        color: #FFFFFF;
        background: #0000A0;
}
.rad_menu_01 ul li:hover a {
        background-color: #008000;
        text-decoration: none;
        color: #FFFF00;
}
/*Color main cells hovering mode*/
.rad_menu_01 ul li:hover ul {
        display: block;
        position: absolute;
        z-index: 999;
        top: 29px;
        margin-top: 1px;
        left: 0;
}
.rad_menu_01 ul li:hover ul li a {
        display: block;
        width: 12em;
        height: auto;
        line-height: 1.3em;
        margin-left: -1px;
        padding: 5px 10px 5px 10px;
        border-left: solid 1px #004080;
        border-bottom: solid 1px #004080;
        background-color: #0000FF;
        color: #FFFFFF;
}
/*Color subcells normal mode*/
.rad_menu_01 ul li:hover ul li a:hover {
        background-color: #CA0000;
        text-decoration: none;
        color: #FFFF00;
}
/*Color subcells hovering mode*/
.rad_menu_01 table {
        position: absolute;
        top: 0;
        left: 0;
        border-collapse: collapse;
        color: #FFFFFF;
        background: #0000A0;
}
.rad_menu_01 ul li a:hover {
        background-color: #008000;
        text-decoration: none;
        color: #FFFF00;
}
/*Color main cells hovering mode*/
.rad_menu_01 ul li a:hover ul {
        display: block;
        width: 12em;
        position: absolute;
        z-index: 999;
        top: 29px;
        left: 0;
}
.rad_menu_01 ul li a:hover ul li a {
        display: block;
        width: 12em;
        height: 1px;
        line-height: 1.3em;
        padding: 4px 16px 4px 16px;
        border-left: solid 1px #004080;
        border-bottom: solid 1px #004080;
        background-color: #0000FF;
        color: #FFFFFF;
}
/*Color subcells normal mode*/
.rad_menu_01 ul li a:hover ul li a:hover {
        background-color: #CA0000;
        text-decoration: none;
        color: #FFFF00;
}
/*Color subcells hovering mode*/
/*]]>*/
</style>  
  </head>  
  <body>    
    <div class="rad_menu_01">      
      <ul><li>        
        <a href="/">HOME            
          <!--[if IE 7]><!--></a>          
        <!--<![endif]-->          
        <!--[if IE]><table><tr><td><![endif]-->          
        <!--[if IE]></td></tr></table></a><![endif]--></li>      
      </ul>      
      <ul><li>        
        <a href="#">PAGE 1            
          <!--[if IE 7]><!--></a>          
        <!--<![endif]-->          
        <!--[if IE]><table><tr><td><![endif]-->         
        <ul><li>          
          <a href="#" class="lastone">SUBPAGE 1a</a></li>        
        </ul>        
        <!--[if IE]></td></tr></table></a><![endif]--></li>      
      </ul>      
      <ul><li>        
        <a href="#">PAGE 2            
          <!--[if IE 7]><!--></a>          
        <!--<![endif]-->          
        <!--[if IE]><table><tr><td><![endif]-->         
        <ul><li>          
          <a href="#">SUBPAGE 2a</a></li><li>          
          <a href="#" class="lastone">SUBPAGE 2b</a></li>        
        </ul>        
        <!--[if IE]></td></tr></table></a><![endif]--></li>      
      </ul>    
    </div>  
  </body>
</html>

Menu en css 2X horizontal et W3C

2 réponses

Discussions similaires

Newsletters