La méthode qui suit est adaptée du thème DJay d’amalgame.

Placer le code suivant, en adaptant les liens, par exemple dans votre _top.html :

<ul id="menu-links">
        <li><a href="{{tpl:BlogURL}}archive">Archives</a></li>
        <li><a href="{{tpl:BlogURL}}tags">Tags</a></li>
        <li><a href="#">Liens</a>
        <ul>
                <li><a href="{{tpl:BlogURL}}admin">Admin</a></li>
                <li><a href="http://www.dotclear.net">Dotclear</a></li>
                <li><a href="http://validator.w3.org/check/referer">valide XHTML</a></li>
                <li><a href="http://jigsaw.w3.org/css-validator/check/referer">valide CSS</a></li>
        </ul>
        </li>
</ul>

Code dans la CSS :

ul#menu-links {
        list-style: none;
        float: left;
        font-size: 1.3em;
        font-weight: bold;
        letter-spacing: 1px;
        margin-top: 2em;
        line-height: 1.5em;
}
        ul#menu-links a { display: block; }
                ul#menu-links a:link, ul#menu-links a:visited { color: #B2B2B2; }
                ul#menu-links a:hover { color: #FFF; }
        ul#menu-links li { float: left; margin-right: 18px; }
                ul#menu-links li ul { display: none; position: absolute; left: 50%; margin-left: -360px; padding-left: 9.25em; list-style: none; width: 31em; }
                        ul#menu-links li ul li { position: relative; float: left; font-size: .75em; font-weight: normal; }
                ul#menu-links li:hover>ul { display: block; }

Pour IE (qui ne reconnaît pas les hover sur autre chose que des liens) : créer un fichier menu.js dans le répertoire /js, et y coller le code suivant :

// JavaScript Document
function hover(obj){
  if(document.all){
    UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      if(sousMenu .display == 'none' || sousMenu.display == ''){
        sousMenu.display = 'block';
      }else{
        sousMenu.display = 'none';
      }
    }
  }
}

function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
    }
    LI[i].onmouseout = function(){
      hover(this);
    }
  }
}

function montre(id) {
var d = document.getElementById(id);
        for (var i = 1; i<=10; i++) {
                if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
        }
if (d) {d.style.display='block';}
}

Modifier le <body> des fichiers en .html du thème actif par <body onload="setHover()">.

Ajouter

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/menu.js"></script>

dans le fichier _head.html.