How to get the Tololtip Tail for Menu


Tags: javascript,jquery,html,css,tooltip

Problem :

HTML

<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>

On clicking the ImageMenu.png, I'm displaying a Menu using JQuery. How to Get the Tooltip tail (Uparrow) just under the Menuimage using CSS?



Solution :

I think your looking something like this...

  • My Image
    • One
    • Two
    • Three
  • CSS contains...

    mymenu a

    { float: left; height: 30px; padding: 0 15px; color: #222; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; }

    mymenu li:hover > a

    { color: #222; }

    html #mymenu li a:hover / IE6 */ { color: #222; }

    mymenu li:hover > ul

    { display: block !important; }

    /* Sub-menu */

    #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;
    }
    

    WORKING DEMO: http://jsfiddle.net/nPeaV/7430/


      CSS Howto..

      How to build a completely static multipage website with BEM?

      How to change position of a sphere overtime using css

      How to highlight selected tab in Web Forms including Master Page

      how to change css of n number of div element using jquery

      How to select part of a custom element with CSS?

      how to scroll text area horizontally?

      How to avoid margin form ul in li tag?

      How to wrap Font-Awesome with CSS?

      How to underline gaps created with CSS columns property?

      How to remove outline dotted border with using css

      myFlowPanel has many childFlowPanels, so how to create the same margin for all childFlowPanels without using marginTop on childFlowPanels (GWT)?

      How can I position two to always be side by side

      CSS: How can I set image size relative to parent height?

      How to inherit from ancestor and not parent in CSS?

      How do I edit the VIM Omni Completion so that all CSS properties do not end in a colon?

      How to add multiple link styles on the same page?

      How to define `autocomplete=“off”` as a CSS style?

      How to make input+label in a form appear one by one?

      How to add left border with image(s) dynamically

      How to make this arrow in CSS only?

      How to keep website footer at bottom even when page expands downwards

      How to have a color change animation on a button outline?

      How to visually indicate current page in ASP.NET MVC?

      how to combine css with php while loop and table?

      How to get my navbar to fluidly contain the largest element?

      HTML/CSS: How to achieve the following center-left alignment?

      How to get similar style as JQuery UI website itself

      How to override a style of a specific Joomla module?

      How can i stop a child div moving towards left when browser size becomes less than webPage size?

      How to achieve this diagonal drop down effect with CSS?