Guide on acquiring the Tololtip Tail in your Menu's inventory

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>

Clicking the ImageMenu.png triggers a menu using JQuery. How can I position the tooltip tail (up arrow) directly under the menu image using just CSS?

javascriptjqueryhtmlcsstooltip

Answer №1

It seems like you are trying to achieve something along these lines...

  • My Example
    • One
    • Two
    • Three

    • Here is the CSS snippet...

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

    mylist li:hover > a

    { color: #222; }

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

    mylist li:hover > ul

    { display: block !important; }

    /* Sub-menu */

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


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

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

#mylist 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 #mylist ul a /* IE6 */
{    
    height: 10px;
}

*:first-child+html #mylist ul a /* IE7 */
{    
    height: 10px;
}
#mylist 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;
}
#mylist ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

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

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

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

    SEE IT IN ACTION: http://jsfiddle.net/nPeaV/7430/

    Answer №2

    Check out this great resource!

    Live Demo

    View Source Code

    Similar questions

    If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

    The geocomplete function is not available for use with autocomplete

    Hey there, I'm encountering an issue with autopopulated code. I keep getting the error "geocomplete is not a function" when trying to use it locally (in a separate file), but oddly enough it works fine for me in that context. Any idea what might be ca ...

    phpjqueryajaxdictionarygeocomplete

    Ways to swap out an img element with an almost identical gif element while maintaining its precise placement consistently

    I am facing an issue in my code where a random element is generated within the body and when clicked, it is replaced with another gif element. I am using offset() to obtain the top and left values of the original image, and then using replaceWith() to swap ...

    javascriptjqueryhtmlcssgif

    How to pass a single value using onClick event without relying on form submission

    I prefer to pass a single value instead of multiple putPriority fetch calls. This value will not be inputted by the user directly, but rather passed through an onClick event. For example, I want the onClick to send a specific number to "status" in the fe ...

    javascriptreactjs

    Utilize THREE.js to control the camera with a button click

    I'm looking to add separate buttons on my website, where each button triggers the camera to move to a different position within the scene. How can I achieve this? Currently, I have set up a system where pressing a button leads to a sequence of predefi ...

    javascriptbuttoncamerathree.jsposition

    Is there a way to align text with a certain element and ensure that it remains in place regardless of the screen size?

    I need the word "social" to remain in line with the black bars, both on regular devices and mobiles. Although in bootstrap/html it may not align perfectly, it still stays close to the black bars. See example here Here is the code. Even though I can adjus ...

    htmlcssbootstrap-4

    Expanding the size of a Three.js geometry in one direction

    I've been experimenting with scaling geometries on the y-axis, but I've run into an issue where my cube scales both up and down. I found that using mesh.transformY to animate the cube up by half of the scaling value can create the illusion of the ...

    javascriptthree.js

    Is there a way to conceal a button until a minimum of three input checkboxes, with one selected from each group of six, are marked?

    I am working on a feature where I have three lists of foods categorized into Protein, Carbs, and Fats. Each list contains six food items represented as checkboxes. The goal is to show a button at the bottom of the lists only when at least one item from eac ...

    javascripthtmlfunctiondom-eventsaddeventlistener

    Guide on getting a website name from a URL using Javascript

    Is there a simple method to extract the site name from a URL string? For example: http://www.mysite.com/mypath/mypage -> www.mysite.com http://mysite.com/mypath/mypage -> mysite.com The JavaScript code runs on the mongodb CLI side, not within ...

    javascriptnode.jsmongodbserverside-javascript

    Creating a directive in AngularJS to automatically populate select options with custom values

    As someone who is relatively new to creating directives, I am looking to develop a directive that will assist me in my application. What I aim to achieve is a select element directive that comes pre-populated with options and is self-contained. All I need ...

    javascriptangularjsdrop-down-menuangularjs-directive

    Adding text to an existing div element using jQuery and ensuring the div tag automatically adjusts its height according to the text length

    I have attempted to implement the following code, but unfortunately, it is not functioning as expected. I am hopeful that someone can assist me. I am seeking a way for the div tag to dynamically increase its height based on the size of the text. Does any ...

    javascriptjqueryhtmlcss

    Unexpected JSONP Parsing Issue Despite Correct JSON Data

    I've implemented a Cross Domain AJAX request using JSONP, and it's working fine with CORS. However, I'm facing an issue with JSONP. I've checked other threads but couldn't find a solution for my case. Below is the code snippet: ...

    javascriptjqueryjsonajaxjsonp

    Steps to send a prop value to a Vue.js SCSS file

    I am trying to include the props (string) value in my scss file Within my component, I am using the nbColor prop with a value of 'warning'. I want to be able to use this value in my scss file where I have a class called .colorNb {color: color(nb ...

    javascriptvue.jsvuejs2vue-componentvuejs3

    CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

    I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

    htmlcss

    "An error has occurred stating that the header is not defined in

    It is a coding issue related to payment methods. The headers type is undefined in this scenario, and as a newcomer to typescript, pinpointing the exact error has been challenging. An error message is indicating an issue with the headers in the if conditio ...

    javascriptreactjstypescriptapipayment

    Encountered an error: Unable to access property '0' of an undefined variable

    Below is the script I am using: <script> var count; var obj; function search() { xhr = new XMLHttpRequest(); xhr.open("GET", "test.json", true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4 & ...

    javascriptjqueryjsonxmlhttprequest

    Removing Discord Channel with Discord.js

    Currently in the process of developing a ticket system using discord.js Experiencing a challenge where upon a member reacting to the message with a specific emoji, the ticket is supposed to close. However, when running the code, it is throwing an error. i ...

    javascriptdiscorddiscord.jsembed

    Hash functionality does not cooperate with the back button, requiring the use of JavaScript to trigger a function when the URL changes

    Hi everyone, I have a code snippet that is designed to read the value after the hash in the URL and display a specific div based on that value. It works as expected, except for when the hash is changed while already on the site or when navigating back with ...

    javascripthashonchangewindow.location

    The color of the element remains unchanged even when hovering the cursor over it

    Below is an example of HTML code: <h1 class="one">Hello</h1> Here is the corresponding CSS style sheet applied to it: h1:hover { color: red; } h1.one { color: blue; } When this code runs, the h1 element should turn blue. Ho ...

    htmlcss

    Changing a p element to a div and adding a class in Bootstrap 4.5

    To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

    csstwitter-bootstrapbootstrap-4

    PHP does not automatically escape HTML special characters

    Within my ZF2 application, there is a .phtml layout that includes the following code: <p>Created in 2015 <?php echo htmlspecialchars("by Jérôme Verstrynge",ENT_HTML5); ?></p> However, when I review the source of the pages returned by ...

    phphtmlzend-framework2html-escape-characters