Исправлен div с зависанием в браузере Safari

Question

У меня есть фиксированный заголовок на моей странице внутри этого заголовка. У меня есть меню с свойством (отображение нет), когда я нахожу этот заголовок (header_b), меню будет отображаться с (блок отображения), но оно работает хорошо во всех браузерах, кроме браузера Safari.

<style> 
.subnav_dd{ 
    display: none; 
    z-index: 99999; 
    float: left; 
    position: absolute; 
    border-left: 1px solid #CCC; 
    border-right: 1px solid #CCC; 
    border-bottom: 1px solid #CCC; 
    background-color: #EEE; 
    margin-top: 24px; 
    margin-left: -13px; 
    width: 180px; 
    padding: 0px; 
    overflow: hidden; 
    -moz-box-shadow: 1px 2px 3px #CCC; 
    -webkit-box-shadow: 1px 2px 3px #CCC;  
    box-shadow: 1px 2px 3px #CCC; 
} 
#nav_library:hover .subnav_dd{ 
    display: block; 
} 
</style> 
    <div id="header_b" style="position: fixed; width: 100%; z-index: 999; top:60px;"> 
    <div id="nav_library" class="mnb_on"> 
    <div id="dd_library" class="subnav_dd" align="left">Code ....... </div> 
    </div> 
    </div> 

Answer 1

В вашем примере - #nav_library элемент не имеет ширин/высоту/содержания, так что вы не можете на самом деле не hover его (нет доступной области зависать).

Примечание В этом примере, что вы не можете hover#nav_library элемент (в любом браузере):

.subnav_dd{ 
 
    display: none; 
 
    z-index: 99999; 
 
    float: left; 
 
    position: absolute; 
 
    border-left: 1px solid #CCC; 
 
    border-right: 1px solid #CCC; 
 
    border-bottom: 1px solid #CCC; 
 
    background-color: #EEE; 
 
    margin-top: 24px; 
 
    margin-left: -13px; 
 
    width: 180px; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    -moz-box-shadow: 1px 2px 3px #CCC; 
 
    -webkit-box-shadow: 1px 2px 3px #CCC;  
 
    box-shadow: 1px 2px 3px #CCC; 
 
} 
 
#nav_library:hover .subnav_dd{ 
 
    display: block; 
 
}

<div id="header_b" style="position: fixed; width: 100%; height: 50px; z-index: 999; top:60px; border: 1px solid red;"> 
 
    <div id="nav_library" class="mnb_on"> 
 
    <div id="dd_library" class="subnav_dd" align="left">Code ....... </div> 
 
    </div> 
 
</div>

Хотя этот пример показывает, что вы можете (я добавил границу, чтобы сделать площадь элемента взятия на экране):

.subnav_dd{ 
 
    display: none; 
 
    z-index: 99999; 
 
    float: left; 
 
    position: absolute; 
 
    border-left: 1px solid #CCC; 
 
    border-right: 1px solid #CCC; 
 
    border-bottom: 1px solid #CCC; 
 
    background-color: #EEE; 
 
    margin-top: 24px; 
 
    margin-left: -13px; 
 
    width: 180px; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    -moz-box-shadow: 1px 2px 3px #CCC; 
 
    -webkit-box-shadow: 1px 2px 3px #CCC;  
 
    box-shadow: 1px 2px 3px #CCC; 
 
} 
 
#nav_library { 
 
    border: 1px solid blue; 
 
} 
 
#nav_library:hover .subnav_dd{ 
 
    display: block; 
 
}

<div id="header_b" style="position: fixed; width: 100%; height: 50px; z-index: 999; top:60px; border: 1px solid red;"> 
 
    <div id="nav_library" class="mnb_on"> 
 
    <div id="dd_library" class="subnav_dd" align="left">Code ....... </div> 
 
    </div> 
 
</div>