Inaccurate Placement of Navigation Tool Tip

I added some custom tooltip arrows to my navigation menu. They appear when you hover over the menu items, but strangely they also show up at the bottom of the drop-down. I'm curious about which piece of code is causing this behavior!

Below is the code snippet that I used to incorporate these tooltip arrows:

Visit development site

.cftopnavrightlower ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFC700;
margin-left: -10px;
}
htmlcsswordpressnavigationtooltip

Answer №1

In order to achieve the desired result for the UL you are targeting with the arrows, you will need to provide more specific styling. Currently, ul.flyout is being styled with an arrow based on your current selector.

You may find success with the following code snippet:

#menu-header-nav > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFC700;
margin-left: -10px;
}

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

Difficulty with wp_enqueue_script function

Issue: My custom.js is loading before jquery causing an error. In my functions.php file, I have included the following code: function blue_sentry_scripts() { wp_enqueue_style( 'blue-sentry-style', get_stylesheet_uri() ); wp_enqueue_scr ...

jquerywordpress

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

javascripthtmlcssvue.jsnuxt.js

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

Utilizing dual <legend> elements within a fieldset

I am attempting to include two legends within a fieldset. The first legend consists of an image in the center of the fieldset, while the other legend should be another image aligned to the very right side of the fieldset. The code snippet below demonstrate ...

htmlcsscss-position

Safari and mobile browsers do not support animation functionality

My animation works flawlessly in Chrome, but it's not functioning properly on Safari. Quite odd, right? Here is the code snippet: <header> <div class="ripple-1"></div> <div class="ripple-2"></div> ...

css

Arranging three section elements side by side

I have encountered an issue where I have 3 consecutive section tags in a row, but when applying margin to them, the last section tag moves to the next line instead of staying on the same line. I attempted using the float:left and display:inline properties ...

htmlcssbootstrap-4twitter-bootstrap-4-beta

Tips on turning off automatic positioning in Bootstrap 4.1

My dropdown list is currently quite large. Take a look at the image linked below. Image How can I address this issue effectively? I'm considering utilizing JavaScript to reposition the menu. Any guidance on how to disable auto-positioning? Check ou ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Attempting to showcase JSON response within an HTML page using JavaScript

Can anyone help me troubleshoot my code for displaying JSON data on a web page? Here's what I have so far: <button type="submit" onclick="javascript:send()">call</button> <div id="div"></div> <script type="text/javascript ...

javascripthtml

What is the best way to clear dropdown selections in jQuery mobile

I stumbled upon a post discussing the topic of resetting dropdowns in jQuery. However, I encountered an issue where jQuery mobile ceased to function after making a selection. To explore this further, I have included my code snippet from jsfiddle: http://js ...

javascriptjqueryhtmljquery-mobile

The <nav> and <section> elements are not appearing on the page

Website: CSS: Hello there! I am experiencing an issue where the nav and section elements are not displaying on my website. They seem to only show the height and background-color attributes. Interestingly, they appear correctly on my old Firefox version ( ...

csshtmlnav

Ways to limit the display of search result page numbers at the bottom of the search results page using PHP

I'm experiencing an issue with limiting the number of search result pages in my PHP page. Currently, I have 3 fields for user input and the search results are displayed at the bottom. When all fields are selected, the page numbers keep increasing at ...

phpmysqlhtml

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps

The bottle framework has run into a problem due to exceeding the maximum recursion

I've encountered a maximum recursion depth error while trying to add a path for my web app. def runSQL(sql): db = sqlite3.connect('zadanie.db') c = db.cursor() c.execute(sql) data = c.fetchall() db.commit() c.close() ...

pythonhtmlbottlesqlitestudio

dynamically inserting new data fields and calculating cumulative total

I'm looking to find a way to calculate the total sum of dynamically added fields and have the result displayed on the page. However, I seem to have hit a roadblock along the way. Here is the code that I'm currently examining and trying to unders ...

javascriptjqueryhtmlbootstrap-4

My attempts at locating child elements using XPATH have been unsuccessful in finding an exact match

I have a specific requirement to input a string into the webdriver and then compare it with the label of a radio button. <input type="radio" onclick="Element.show('indicator_radio_term_190');render_selected_term('190','1', ...

htmlseleniumxpathautomation

Tips for converting plain text output into HTML tags

I recently set up a contact form 7 on my website, and I'm trying to customize the message that appears after submission. However, I'm running into an issue when attempting to split the message into two different colors. I created a span class to ...

phphtmlcsswordpress

Is there a way to make my modal appear only when the "New" option is clicked?

Is there a way to make my modal in VueJS open only when I click on the "New" option? <select v-model="input.des" @change="$refs.modalName.openModal()"> <option value="A">A</opt ...

javascripthtmlvue.js

When words are enclosed in a table cell, the fixed table layout ensures that all columns are the same size

There are times when long words in my HTML table cells need to be broken if they overflow their designated area. To learn how to break table cell words, check out this question: Word-wrap in an HTML table The recommended CSS style is: style="word-wrap: ...

htmlcss

When a cross-domain iframe is loaded in a private browser, it automatically logs the user out

I've been collaborating with a client to create a unique standalone website on a subdomain. They have requested that I utilize their API to initiate a straightforward post request when a user clicks a button. However, the client prefers the user to ut ...

javascripthtmljqueryiframe

Enhancing Tapestry Grid component column sort icons

In the Tapestry Grid components, the default column sort icons are blue and white, but if your page has a different color scheme, you may want to personalize them. How can you replace the default Tapestry Grid column sort icons with your own custom icons? ...

csstapestry