HTML如何獲得Tololtip尾巴菜單

<div id="MyForm"> 
    <a> <img src="ImageMenu.png" /></a> 
    <ul> 
     <li> 
      <a class="selected" href="#">One</a> 
     </li> 
     <li> 
      <a href="#">Two</a> 
     </li> 
     <li> 
      <a href="#">Three</a> 
     </li> 
    </ul> 
</div>

在點擊ImageMenu.png，我使用顯示JQuery的一個菜單。如何獲取Tooltip尾部（Uparrow）正好在Menuimage下使用CSS？

來源

2013-10-04 Pearl

小提琴將是這種問題是非常有用的。 – Sergio

我覺得你看起來像這樣...

我的圖像

一個
兩個
三

CSS包含...

的MyMenu一個

{ 浮動：左; height：30px; padding：0 15px; 顏色：＃222; text-transform：大寫; font：bold 12px/25px Arial，Helvetica; text-decoration：none; text-shadow：0 1px 0＃000; }

MyMenu菜單裏：懸停>一個

{ 顏色：＃222; }

HTML #mymenu立一個：懸停/ IE6 */{ 顏色：＃222; }

MyMenu菜單裏：懸停> UL

{ 顯示：塊！重要; }

/*子菜單*/

#mymenu ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0;  
    display: none !important; 
    position: absolute; 
    top: 25px; 
    width:150px; 
    z-index: 99999;  
    background: #fff; 
    background: -moz-linear-gradient(#555, #888); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #888),color-stop(1, #555)); 
    background: -webkit-linear-gradient(#555, #888);  
    background: -o-linear-gradient(#555, #888); 
    background: -ms-linear-gradient(#555, #888);  
    background: linear-gradient(#555, #888); 
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); 
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
    box-shadow: 0 0 2px rgba(255,255,255,.5); 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 


#mymenu ul li 
{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
} 

#mymenu ul li:last-child 
{ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;  
} 

#mymenu ul a 
{  
    padding: 7px !important; 
    height: 10px; 
    width: 135px; 
    height: auto; 
    line-height: 1.8em !important; 
    text-decoration: none !important; 
    font-weight:normal; 
    display: block; 
    white-space: nowrap; 
    float: none; 
    color:#fff; 
    text-transform: none; 
    text-align:left; 

} 

*html #mymenu ul a /* IE6 */ 
{  
    height: 10px; 
} 

*:first-child+html #mymenu ul a /* IE7 */ 
{  
    height: 10px; 
} 
#mymenu ul a:hover 
{ 
    background: #d7d7d7; 
    background: -moz-linear-gradient(#d7d7d7, #d7d7d7);  
    background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#d7d7d7)); 
    background: -webkit-linear-gradient(#d7d7d7, #d7d7d7); 
    background: -o-linear-gradient(#d7d7d7, #d7d7d7); 
    background: -ms-linear-gradient(#d7d7d7, #d7d7d7); 
    background: linear-gradient(#d7d7d7, #d7d7d7); 
    color:#222; 
    text-shadow: none; 
    font-weight:bold; 
    border-bottom:#222; 
} 
#mymenu ul li:first-child > a 
{ 
    -moz-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
} 

#mymenu ul li:first-child > a:after 
{ 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #444; 
} 

#mymenu ul li:first-child a:hover:after 
{ 
    border-bottom-color: #d7d7d7; 
} 

#mymenu ul li:last-child > a 
{ 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
}

工作演示：http://jsfiddle.net/nPeaV/7430/

來源

2013-10-04 12:08:36