擴展激活下拉菜單的「觸發區域」。

目前，只有當鼠標懸停附近的電話圖標或小箭頭區面積時，將下拉菜單而不是當你將光標移動到點擊的dropdownmenu鏈接消失。

當某人從「聯繫人」這個單詞移過來時，只要他移動光標，下拉菜單就會消失。我希望下拉菜單在用戶從「聯繫人」一詞向下移動光標時保持不變。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<link rel="stylesheet" href="style2.css" type="text/css" /> 

</head> 
<body> 

    <div class="Navigation"> 

     <div id="navbar"> 
       <ul> 
        <li class="OP" id="OPM1"><img src="images/order.png" /><a href="Orders.html">Orders</a></li> 

        <li class="OP"><img src="images/contact.png" /><a href="ContactUs.html">Contact</a> 
          <div class="extended"> 
           <div class="arrow-up"></div> 

           <ul class="smallNav"> 
            <li><a href="#">+65-65553333</a></li> 
            <li><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank">Facebook</a></li> 
            <li><a href="http://twitter.com/yourtwitter" target="_blank">Twitter</a></li> 
            <li><a href="www.gmail.com" target="_blank">enquiry [at] foodstant [dot] com</a></li> 
           </ul> 
          </div> 
         </li> 

         </ul> 

</div> 
</div> 
</body> 
</html>

CSS：

.Navigation { background:background: rgb(246,248,249); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0); /* IE6-9 */ 
    border-top-left-radius: 10px; 
    border-bottom-left-radius:10px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius:10px; 

    box-shadow: -3px -5px 10px #888888; 
    font-size: 26px; 

    font-family: 'Conv_LITHOSPRO-REGULAR'; 
} 

.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; } 

.Navigation ul li a { font-size: 26px; font-weight: bold; color: white; text-decoration: none; text-shadow: 0 1px 2px black; } 

.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;} 

.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; } 


.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; } 

.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; } 

.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); } 

.Navigation ul li .extended a { font-size:14px;} 

.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } 

.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; } 

.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; } 

.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; } 

.extended ul li {float:left;} 

.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; } 

.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; } 

.Navigation ul li:hover .extended { display: block; } 

.Navigation ul li ul li:hover a { color: white; } 

#navbar { 

} 

#navbar ul { 
    list-style-position:inside; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 


#navbar ul li {  
     display: inline; 
     padding:0 20px 0px 0px; 
     margin-bottom: 10px; 
     list-style-type:disc; 
    } 

#navbar ul li.OP { 
     padding-left: 15px; 

} 

#navbar ul li.OP img { 
    vertical-align: middle; 
} 

#navbar li a:link { 
    color: #EF174A; 
    } 

#navbar li a:visited { 
    color: #BF4100; 
    } 

#navbar li a:hover { 
    color: black; 
    background-color:#D2D2D2; 
    border-radius: 10px; 
    } 

#navbar li a:active { 
    color: #918FBC; 
    } 

li a { 
    text-decoration:none; 
} 

#navbar ul li.OP a { 
    padding-left: 10px; 
} 

.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; } 

.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;}

來源

2012-08-10 TheKraven

此代碼似乎正在工作。我直接粘貼到這個jsfiddle：http://jsfiddle.net/mBBb6/ – Faust 2012-08-10 09:43:43

包裹arrow-up DIV與另一個DIV這樣的：

<div class="arrow-container"><div class="arrow-up"></div></div>

然後添加arrow-container風格：

.arrow-container { margin-top:-16px; height:16px; }

來源

2012-08-10 10:15:03 Jay

非常感謝=）。您的解決方案奏效你如何計算出「margin-top」和「height」的值？ – TheKraven 2012-08-10 10:35:54

這兩個高度都是基於'arrow-up'重定位，它來自'top：-15px'。但由於它和「接觸」文本之間仍有1像素的間隙，所以它進一步移動了1個像素，並將高度增加到了16像素，從而填補了上下兩個空隙。 – Jay 2012-08-10 12:52:24

哦，所以你實際上創建了一個模擬「向上」區域的小區域嗎？非常有趣的想法。 – TheKraven 2012-08-10 14:57:31

擴展激活下拉菜單的「觸發區域」。

回答

相關問題