Menu CSS et problème html

J'ai des problèmes avec CSS Menu. Je développe un site sur Joomla. Je vais poster ici du code CSS et HTML, de sorte que vous pouvez le copier dans un fichier.Menu CSS et problème html

<html> 

<head> 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
</head> 
</body> 
<div class="left-menu"> 
    <ul class="menu-winery"> 
     <li class="parent active item5"> 
      <a href=""><span>ღვინო</span></a> 
      <ul> 
       <li class="parent active item6"> 
        <a href=""><span>TELIANI VALLEY</span></a> 
        <ul> 
         <li class="item7"> 
          <a href=""><span>ლეგენდა</span></a> 
         </li> 
         <li id="current" class="parent active item8"> 
          <a href=""><span>ღვინოები</span></a> 
          <ul> 
           <li class="active item10"> 
            <a href=""><span>ქვევრის</span></a> 
           </li> 
           <li class="item51"> 
            <a href=""><span>დაძველებული</span></a> 
           </li> 
           <li class="item52"> 
            <a href=""><span>სამშვენისი</span></a> 
           </li> 
           <li class="item53"> 
            <a href=""><span>ადგილწარმოშობის</span></a> 
           </li> 
           <li class="item54"> 
            <a href=""><span>ჯიშური</span></a> 
           </li> 
           <li class="item55"> 
            <a><span>სადესერტო</span></a> 
           </li> 
          </ul> 
         </li> 
         <li class="item9"> 
          <a href="javascript:;"><span>ჯილდოები</span></a> 
         </li> 
        </ul> 
       </li> 
       <li class="item57"> 
        <a><span>MOSSANO DEPUIS 1893</span></a> 
       </li> 
       <li class="item58"> 
        <a><span>TELURI</span></a> 
       </li> 
       <li class="item59"> 
        <a><span>OLD GRUZIA</span></a> 
       </li> 
       <li class="item60"> 
        <a><span>GRUZIA</span></a> 
       </li> 
       <li class="item61"> 
        <a><span>KVARELI</span></a> 
       </li> 
       <li class="item62"> 
        <a><span>LAZURI</span></a> 
       </li> 
      </ul> 
     </li> 
     <li class="item63"> 
      <a><span>ცქრიალა ღვინო</span></a> 
     </li> 
     <li class="item64"> 
      <a><span>ჭაჭა</span></a> 
     </li> 
     <li class="item65"> 
      <a><span>ქართული ბრენდი</span></a> 
     </li> 
    </ul> 
</div> 
</body> 
</head>

Et voici le code CSS:

.menu-winery { margin:0; padding:0; width:145px; list-style:none; } 
.menu-winery li a { font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; color:#7b212b; display:block; 
    text-decoration:none; text-indent: 10px; margin-bottom: 1px; } 
.menu-winery li a:hover { background-color: #7b212b; color:#fff; } 
.menu-winery li.active a { background-color: #7b212b; color:#fff; } 

.menu-winery li ul { margin:0; padding:0; list-style:none; } 
.menu-winery li ul li { text-indent: 20px; } 
.menu-winery li ul li a { background-color: #fff; font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; 
    color:#808285; display:block; text-transform:uppercase; text-decoration:none; margin-bottom: 1px; } 
.menu-winery li ul li a:hover { background-color: #887b32; color:#fff; }   
.menu-winery li ul li.active a { background-color: #887b32; color:#fff; width:200px; height:20px; }  

.menu-winery li ul li ul { margin:0; padding:0; list-style:none; } 
.menu-winery li ul li ul li a { background-color: #fff; font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; 
    color:#cbbc9a; display:block; text-transform:uppercase; text-decoration:none; text-indent: 28px; margin-bottom: 1px; } 
.menu-winery li ul li ul li a:hover { background-color: #cbbc9a; color:#fff; }  
.menu-winery li ul li ul li.active a { background-color: #cbbc9a; color:#fff; }  

.menu-winery li ul li ul li ul { margin:0; padding:0; list-style:none; } 
.menu-winery li ul li ul li ul li a { background-color: #fff; font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; 
    color:#887b32; display:block; text-transform:uppercase; text-decoration:none; text-indent: 33px; margin-bottom: 1px; } 
.menu-winery li ul li ul li ul li a:hover { background-color: #e2dec9; color:#fff; list-style:none; } 
.menu-winery li ul li ul li ul li.active a { background-color: #e2dec9; color:#fff; list-style:none; }

donc ici, j'ai un problème avec l'état actif de Li. Si je mets la classe active à A tag, tout fonctionne bien. Mais dans joomla je vais devoir faire un overide de module de menu principal (et je dois savoir quoi changer là ...)

Peut-être que quelqu'un sait comment résoudre ce problème. Lorsque Active Li est défini, tous les sous-ul qui s'y trouvent obtiennent la couleur des parents.

Quelqu'un peut-il m'aider avec celui-ci?

Source

2011-07-14 mrGott

pouvez-vous ajouter un lien de votre joomla? Probablement c'est un problème de spécificité. – Sotiris

http://telianivalley.com/new/index.php?option=com_telianiwines&view=winelegendlist&catid=1&Itemid=7 <--- c'est le lien ... dans cette version j'ai supprimé CSS avec actif. Je ne voulais pas le faire paraître laid. – mrGott

Joomla utilise l'ID #current pour les éléments de menu actif, alors essayez

.menu-winery li#current a { background-color: #7b212b; color:#fff; }

Source

2011-07-14 16:17:26

Je pense que cela aurait le même effet, mais ça vaut la peine d'essayer. Mais dans le cas de ce projet, Joomla n'affiche pas ID Current, et c'est un fait intéressant aussi, pourquoi il n'affiche pas ID = "Current" .. peut-être que vous savez ... – mrGott

Menu CSS et problème html

Répondre

Questions connexes