Проблема с CSS Drop Down в IE и Safari

Question

Я пытаюсь создать раскрывающееся меню для чистого CSS. Я буду использовать изображения позже, но пока у меня есть держатели цветов. Он отлично работает в Chrome и Firefox. Однако в IE (10) и Safari я не могу получить раскрывающиеся списки.

Я попытался устранить неполадки в IE и обнаружил, что некоторые из моих CSS не отображались в связи с вложенными списками, на которые я построил меню. Например, не было атрибутов CSS для

ul#menu li > ul li:hover span 

даже когда я удалил «зависание». До сих пор ни один из моих исправлений не работал, и я стараюсь избегать полного пересмотра (хотя я и рассмотрел его), потому что он делает именно то, что я хочу в двух других браузерах.

На сайте я проверяю, можно найти здесь: www.nimbleforce.com/public/test

Когда работает должным образом (как в Chrome и FF) основные пункты меню обращаются к серому при наведении курсора мыши. У первого и четвертого пунктов меню есть выпадающие списки, и они загораются красным цветом. В IE серый наведение происходит нормально, но никаких признаков выпадающего меню вообще нет. В Safari это одно и то же, за исключением того, что я нахожу указатель ниже главного меню при наведении курсора, как будто выпадающее изображение там, но невидимо.

Я проверил свой код, и все это становится чистым, за исключением непрозрачных хаков для IE. (Я даже попытался удалить те, чтобы увидеть, если он установил его, но это не так.)

Вот Релевент HTML:

<div id="navBox"> 

    <ul id="menu"> 
     <li id="bookshelf"><a href="#"><span></span></a> 
      <ul id="sub1"> 
       <li id="author"><a href="#"><span></span></a></li><!--by author--> 
       <li id="series"><a href="#"><span></span></a></li><!--by series--> 
       <li id="genre"><a href="#"><span></span></a></li><!--by genre--> 
       <li id="line"><a href="#"><span></span></a></li><!--by line--> 
      </ul> 
     </li> 
     <li id="comingsoon"><a href="#"><span></span></a></li> 
     <li id="blog"><a href="#"><span></span></a></li> 
     <li id="submissions"><a href="#"><span></span></a> 
      <ul id="sub2"> 
       <li id="special"><a href="#"><span></span></a></li><!--special lines--> 
       <li id="calls"><a href="#"><span></span></a></li><!--specific calls--> 
      </ul> 
     </li> 
     <li id="faq"><a href="#"><span></span></a></li> 
    </ul> 


</div> 

И это мой навигации CSS:

#navBox { 

    margin: 44px auto 0 51px; 
    height: 47px; 
    width: 1028px; 

} 


#bookshelf, #comingsoon, #blog, #submissions, #faq { 

height: 47px; 
position: absolute; 
} 

#menu, #sub1, #sub1 li { 

    position: relative; 

} 


#bookshelf, #bookshelf span { 


    background-color: yellow; 
    width: 184px; 
} 

#bookshelf { 

    margin-left: 49px; 
} 


#comingsoon, #comingsoon span { 

background-color: green; 
    margin-left: 0; 
    width: 212px; 
} 


#blog, #blog span { 

background-color: blue; 
    margin-left: 0; 
    width: 122px; 
} 


#submissions, #submissions span { 

background-color: purple; 
    margin-left: 28px; 
    width: 207px; 
} 



#faq, #faq span { 

background-color: red; 
    margin-left: 25px; 
    width: 149px; 
} 

#submissions span, #faq span { 

    margin-left: 0; 

} 




#bookshelf, #comingsoon, #blog, #submissions, #faq, #bookshelf a span, #comingsoon a span, #blog a span, #submissions a span, #faq a span { 

    cursor: pointer; 

    display: block; 
    float: left; 



} 
#bookshelf a span, #comingsoon a span, #blog a span, #submissions a span, #faq a span { 


height: 100%; 
    opacity: 0; 
    filter:alpha(opacity=0); /* For IE8 and earlier */ 
    transition: opacity 1s ease; 
    -moz-transition: opacity 1s ease; 
    -webkit-transition: opacity 1s ease; 
} 

#bookshelf a span { 


    background-color: gray; 
} 





#comingsoon a span { 


    background-color: gray; 
} 




#blog a span { 


    background-color: gray; 
} 




#submissions a span { 


    background-color: gray; 
} 


#faq a span { 


    background-color: gray; 
} 

#bookshelf a:hover span, #comingsoon a:hover span, #blog a:hover span, #submissions a:hover span, #faq a:hover span { 

opacity: 1.0; 
filter:alpha(opacity=100); /* For IE8 and earlier */ 

} 



ul#menu li 
{ 
    position:relative; 
    list-style-type:none; 
    padding:0px; 

} 


#sub2 li { 

    margin-left: 0; 

} 

ul#menu li > ul span { 

    left:0; 

    display: none; 
    background-color: blue; 
    opacity: 1.0; 
filter:alpha(opacity=100); /* For IE8 and earlier */ 
    transition: background-color 1s ease; 
    -moz-transition: background-color 1s ease; 
    -webkit-transition: background-color 1s ease; 
} 


ul#menu li > ul li:hover span { 

    background-color: red; 
} 



ul#menu li > ul span#sub1 { 
    width: 184px; 
} 

ul#menu li > ul span#sub2 { 
    width: 207px; 
} 

ul#menu li:hover > ul span 

{ 
     display: block; 
} 

Это мой первый раз здесь, поэтому, если я сделал это неправильно, пожалуйста, несите мою нужность и дайте мне знать. Я попытаюсь исправить это сразу. Спасибо за любую помощь, которую вы можете мне дать.

Answer 1

Проблема оказалась комбинацией ничего, что было в пролетах (поэтому у них не было высоты) и используемого нами типа doctype , Я добавил <br/>s к пролету и увидел прогресс, но IE все равно не играл. Позже я прибегнул к поиску выпадающего меню, которое работало в IE и продолжалось по очереди, чтобы увидеть, где были различия. Как это бывает, я использовал HTML 5, но с использованием переходного 4.0 doctype. Я изменил это, и меню отлично работало.

Благодарим вас, @MitchDart, за то, что указали мне в правильном направлении. Вы были очень полезны.

Answer 2

Вы пробовали удаления

display: none; 

внутри

ul#menu li > ul span 

CSS? Я не понимаю, почему вы хотите, чтобы там, если вы устанавливаете непрозрачность на полный