2013-11-21 2 views
-1

Это мой сайт http://igbowomenassembly.org/, я использую тему, когда я нажимаю «Наш исполнительный», «National Executive», появляется подменю, но я не могу щелкнуть по всем элементам, когда Я пытаюсь нажать на вице-президента, он автоматически показывает мне исполнительное меню Engugu.Html/Css Issue tag tag

Спасибо, что помогли мне и разобрались в моей проблеме.

Извините, но я не familier с Html/css alot, проблема во всех браузерах.

/* Главное меню /////////////////////////////// */

.menu-bar { 
    background:#222222; 
    } 
.menu-bar .menu { 
    display:inline-block; 
} 
.menu { 
    list-style:none; 
} 
.menu li { 
    position:relative; 
} 
.menu > li { 
    display:inline-block; 
} 
.menu > li > a { 
    padding:15px 22px; 
    font-size:15px; 
    color:#fff; 
    text-transform:uppercase; 
    display:inline-block; 
} 
.menu li:hover > a { 
    background:#000; 
} 

.menu-bar li ul { 
    width:172px; 
    height:0px; 
    padding:0; 
    background:#000; 
    z-index:201; 
    overflow:hidden; 
    display:block; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    left:0px; 
    top:50px; 

    border-radius:0px 3px 3px 3px; 
    -moz-border-radius:0px 3px 3px 3px; 
    -webkit-border-radius:0px 3px 3px 3px; 

    transition:all 0.4s ease; 
    -moz-transition:all 0.4s ease; 
    -webkit-transition:all 0.4s ease; 
} 
.menu li li a { 
    padding:10px 12px; 
    font-size:14px; 
    color:#fff; 

    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
} 

.menu-bar li li { 
    display:none 
} 
.menu-bar li:hover li { 
    display:block 
} 
.menu-bar li li a { 
    display:block; 
} 
.menu-bar li li:hover > a { 
    background:#222; 
} 
.menu-bar li:hover > ul { 
    overflow:visible; 
    padding:8px; 
} 
.menu-bar li:hover > ul { 
    height:auto; 
    opacity:1; 
    filter:alpha(opacity=100); 
} 
.menu-bar li > ul ul { 
    height:auto; 
    margin-left:8px; 
    margin-top:-8px; 
    left:100%; 
    top:0px; 
} 
.menu-bar li li:hover > ul { 
    opacity:1; 
    top:0px; 
} 
+3

Пожалуйста, отправьте ваш HTML, CSS и другая информация о том, что может помочь нам, чтобы помочь вам. –

+1

Кроме того, выполнение того, что вы сказали, что вы не могли сделать, работало для меня в Win/Chrome, поэтому вам нужно быть более конкретным, где он не работает. Вы должны попробовать выполнить некоторые проверки ошибок: попробуйте в нескольких браузерах, а затем скажите нам, в каких браузерах он не работает. – Ming

+0

@Setek Я новый пользователь, я попытался изо всех сил объяснить мой quesiton пожалуйста, продвигайте меня, чтобы я мог использовать stackoverflow в будущем. – user3015451

ответ

2

Это простой вопрос z-index. Линия:

.menu-bar li ul 

говорит все подменю иметь z-index из 201. Если все подменю, скрытые в то время или нет, имеют один и тот же z-index, то тот, который идет ниже в исходном порядке будет заменяют один над ним. Вот почему внезапно появляется нижнее меню.

Если вы обновляете только подвешенное подменю с более высоким индексом, оно будет отменять любые подменю ниже в порядке источника. Поэтому, обновив этот код:

.menu-bar li li:hover > ul { 
    opacity:1; 
    top:0px; 
    z-index: 202; /* this is a new line */ 
} 

Устранить проблему.

Вот jsFiddle его: http://jsfiddle.net/2WcBW/

+0

Спасибо большое за помощь, это работает ... :) – user3015451