Выпадающее меню и css

1-е рекомендую поставить плагин RusToLat ибо ссылки смотрятся не кашерно
2-е используй другой вариант вывода меню, несколько месяцев назад делал проект…

этот пример использовал http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
оттуда нужно скачать файлы для работы скрипта + пару картинок (стрелки вниз и вправо), думаю несложно будет разобраться как сделать так, чтобы они отображались на сайте.

в файле jqueryslidemenu.js изменишь строку на путь к изображениям var arrowimages=

это в шапку:

для IE 7

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;}
</style>
<![endif]-->

это ниже в шапке

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js" type="text/javascript"></script>//обязательно выше должно стоять, чем текст ниже
<script src="<?php bloginfo('template_directory'); ?>/js/jqueryslidemenu.js" type="text/javascript"></script>

это в style.css как раз для тебя

/*Drag menu*/

.menu ul{
    margin:0;
    padding: 0;
}
.menu a{
    padding: 0 10px;
    text-decoration:none;
    color:#0374ba;
}
.menu a:hover{
    color:#fff;
    background: #0374ba;
}
.jqueryslidemenu{width: 990px;padding-top:10px;}
.jqueryslidemenu ul{}
/*Top level list items*/
.jqueryslidemenu ul li{position: relative;display: inline;float: right; text-transform: uppercase;
    list-style-type: none;
    font:bold 10pt Arial;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
padding: 8px 10px;
    color: #0374ba;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: #0374ba;
}

.jqueryslidemenu ul li a:hover{
    color:#fff;
    background: #0374ba;
}
    
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
text-align:left;
text-transform:none;
width: 200px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-bottom: 1px solid #FFF;
}

/*sub menus hover style*/
.jqueryslidemenu ul li ul li a:link, .jqueryslidemenu ul li ul li a:visited{
    color:#FFF;
    background: #0374ba;
    text-transform:none;
}

.jqueryslidemenu ul li ul li a:hover{
    color:#0374ba;
    background: #fff;
    border-bottom: 1px solid #0374ba;
}
/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

это там где вывести нужно

<div id="myslidemenu" class="menu jqueryslidemenu">
    <ul>
        <?php $pages = wp_list_pages("echo=0&title_li=&sort_column=menu_order&sort_order=DESC");;
            $pages = preg_replace('/title=\"(.*?)\"/','',$pages);
            echo $pages;?>
    </ul>
</div>

сразу обрежет ненужные всплывающие подсказки title

если не поможет, рекомендую посмотреть значения z-index где то стоит неверное значение.

axeleus, спасибо большое!
Сделал по вашему совету. Получилась гремучая смесь из этого скрипта и того плагина, что стоял у меня раньше. Но! Самое главное работает как нужно!

Незачто