Safariブラウザでホバリングしているdivを修正しました

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>