J'ai un soucis de menu déroulant, pour un nouveau style et ça serait super si quelqu'un pouvait m'apporter son aide

Je suis en local, je vais donc essayer d'être le plus clair possible.
aperçus du menu en question :


L'affichage du déroulant ne couvre pas parfaitement la "catégorie" juste en dessous et impossible de placer le curseur sur, par exemple, "0 message privé". Le menu se rétracte.
J'ai essayé de modifier le css un bon moment ... sans succès, c'est sans doute un truc tout bête mais je n'arrive pas à mettre le nez dessus !
je joins les codes correspondants:
Code : Tout sélectionner
<div id="barmenu"
<ul class="left">
<li><a href="{U_INDEX}" title="{L_INDEX}"><strong>{SITENAME}</strong></a></li>
<!-- IF SCRIPT_NAME eq 'viewforum' -->
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
<li><a href="{U_POST_NEW_TOPIC}"><i class="new-topic"></i><!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF --></a></li>
<!-- ENDIF -->
<!-- ENDIF -->
<!-- IF SCRIPT_NAME eq 'viewtopic' -->
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
<li><a href="{U_POST_REPLY_TOPIC}"><!-- IF S_IS_LOCKED --><i class="locked-topic"></i><!-- ELSE --><i class="reply-topic"></i><!-- ENDIF --><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></li>
<!-- ENDIF -->
<!-- ENDIF -->
<!-- IF U_EMAIL_TOPIC --><li><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_EMAIL_PM --><li><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}">{L_EMAIL_PM}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_TOPIC --><li><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_PM --><li><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p">{L_PRINT_PM}</a></li><!-- ENDIF -->
<!-- IF U_MCP -->
<!-- IF U_MCP_FORUM --><li><a href="{U_MCP_FORUM}">{L_MODERATE_FORUM}</a></li><!-- ENDIF -->
<!-- IF U_MCP_TOPIC --><li><a href="{U_MCP_TOPIC}">{L_MODERATE_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_MCP_POST --><li><a href="{U_MCP_POST}">{L_MODERATE_POST}</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul>
<ul class="right">
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">Membres ▼ </a>
<ul>
<!-- IF U_TEAM --><li><a href="{U_TEAM}">{L_THE_TEAM}</a></li><!-- ENDIF -->
</ul>
</li><!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
<!-- ENDIF -->
<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT} ▼ </a>
<ul>
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a></li>
<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
<!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li><!-- ENDIF -->
</ul>
</li><!-- ENDIF -->
<!-- IF U_MCP --><li><a href="{U_MCP}">Modération</a></li><!-- ENDIF -->
<!-- IF U_ACP --><li><a href="{U_ACP}">Administration</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul>
</div>
Code : Tout sélectionner
#barmenu {
height:40px;
width: 100%;
background: #0072c6;
position: fixed;
}
#barmenu li {
float: left;
margin: auto;
display: block;
background-color: #0072c6;
}
#barmenu li a {
display: block;
font: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
text-decoration: none;
padding: 12px 12px;
text-align: left;
}
#barmenu li a:hover {
color: #ffffff;
text-decoration: none;
background-color: #004c84;
}
#barmenu ul li ul {
display: none;
}
#barmenu ul li:hover ul {
display: block;
}
#barmenu li ul {
position: absolute;
}
#barmenu li:hover ul li {
float:none;
}
#barmenu ul.left {
float: left !important;
}
#barmenu ul.right {
float: right !important;
}
#navmenu {
height:40px;
width: 100%;
background: #0072c6;
}
#navmenu li {
float: left;
margin: auto;
display: block;
background-color: #0072c6;
padding-right: -20px
}
#navmenu li a {
display: block;
font: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
text-decoration: none;
padding: 12px 12px;
text-align: left;
}
#navmenu li a:hover {
color: #ffffff;
text-decoration: none;
background-color: #004c84;
}
#navmenu ul li ul {
display: none;
}
#navmenu ul li:hover ul {
display: block;
}
#navmenu li ul {
position: absolute;
}
#navmenu li:hover ul li {
float:none;
}
#navmenu ul.left {
float: left !important;
}
#navmenu ul.right {
float: right !important;
}
