Элементы меню, отображаемые за другими в Wordpress

Question

У меня возникли проблемы с отображением моего меню. По каким-то причинам мои пункты меню третьего уровня скрыты за другими. Я просмотрел свой шаблон, который я использую, и с этой точки зрения все выглядит хорошо, иначе параметр меню даже не будет отображаться. Таким образом, я думаю, что что-то не так с моим CSS, хотя я не понимаю, что это будет. Кто-нибудь есть идеи относительно того, что здесь происходит? Вы можете увидеть пример в http://www.bpwsaskatoon.com и затем навести указатель мыши на опции «Членство» вверху.

Answer 1

Проблема в css. Сначала вы должны использовать классы или id: s в стилях навигации. Пример ul li теперь нацеливается на каждую ul li. При использовании #nav ul li будет нацелена только на все ul li внутри #nav. В html ul в .main_nav_menu должен быть div. У вас теперь ul непосредственно под ul.

Я бы порекомендовал вам попробовать некоторые jquery-плагины для выпадающих меню. Пример Superfish довольно хорош, он заботится о многих тигах, которые вы должны учитывать в выпадающих меню, например, событиях касания.

Вот быстрый css, который должен отображать пункты меню 3-го уровня.

/*Navigation styles*/ 

    #nav{ 
     display:table; 
     margin:0 auto 0 auto; 
     position:relative; 
     padding:5px; 
    } 

    #mnwrpr{ 
     height:48px; 
     box-shadow: 0 1px 2px rgba(0,0,0,0.5); 
     clear: both; 
     display: block; 
     position: relative; 
     width: 100%; 
     z-index:1; 
    } 

    #nav ul { 
     font-family:'Lato', sans-serif; 
     font-size: 15px; 
     margin: 0; 
     padding: 0; 
    } 
    #nav ul li { 
     display: block; 
     position: relative; 
     float: left; 
    } 
    #nav li ul { 
     display: none; 
    } 
    #nav ul li a { 
     display: block; 
     text-decoration: none; 
     color: #8b8b8b; 
     padding: 5px 15px 5px 15px; 
     margin-left: 1px; 
     white-space: nowrap; 
    } 

    #nav li:hover ul { 
     display: block; 
     position: absolute; 
    } 
    #nav li:hover li { 
     float: none; 
     font-size: 14px; 
    } 
    #nav li:hover li { background: #ececec; } 
    #nav li:hover li a:hover { 
     background: #bcbcbc; 
    } 

    #nav ul li ul li ul { 
     top: 0; 
     left: 100%; 
     z-index: 99; 
     min-width: 12em; 
     position: absolute; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     display: none!important; 
    } 

    #nav ul li ul li:hover ul { 
     display: block!important; 
    } 

    #nav ul li ul li ul li { 
     position: relative; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
    }