Position CSS triangles for active hyperlinks

I'm having trouble creating a triangle for hover-over links, as the triangle always shows up in one corner instead of below the links. Can anyone help me pinpoint the exact issue?

Fiddle

 #navcontainer a:hover::after {
            background: white;
            border: solid black;
            border-width: 1px 1px 0 0;
            bottom: -5px;
            content: ' ';
            display: block;
            height: 10px;
            left: 32px;
            position: absolute;
            width: 10px;
            z-index: 99;
            -webkit-transform: rotate(-45deg);
            -webkit-transform-origin: 50% 50%;
        }
htmlcsshtml-lists

Answer №1

To achieve the desired hover effect, it is recommended to apply it to the LI element rather than the A element.

#navcontainer li:hover::after {

Instead of

#navcontainer a:hover::after {

Additionally, ensure that the display type of the LI is set to inline-block, specify a height (minus the top padding from the UL), and set a relative position to contain the arrow.

    #navcontainer ul li {
        display: inline-block;
        height:35px;
        position:relative;
    }

For the hover effect, given that the arrow is 10px wide, you can position it centrally by calculating 50% of the width minus 5px (half of the arrow's width).

    #navcontainer li:hover::after {
        background: white;
        border: solid black;
        border-width: 1px 1px 0 0;
        bottom: -5px;
        content: ' ';
        display: block;
        height: 10px;
        left: calc(50% - 5px);
        position: absolute;
        width: 10px;
        z-index: 99;
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: 50% 50%;
    }

Following these steps, the arrow should now be correctly positioned on hover.

Answer №2

Make sure to include position:relative in the #navcontainer ul li a styles.

By adding this property, the CSS triangle created with :after will know how to position itself based on the parent element.

 #navcontainer ul li a {
     text-decoration: none;
     padding: .2em 1em;
     color: #fff;
     position:relative; /* ensure proper positioning */
}

Check out the updated FIDDLE here

Answer №3

Cascading Style Sheets (CSS):

#navcontainer a:hover::after {
   /*background: white;*/ /* the issue lied here */
   background: blue;      /* now displaying a full triangle */
    border: solid black;
    border-width: 1px 1px 0 0;
    bottom: -5px;
    content: ' ';
    display: block;
    height: 10px;
    left: 32px;
    position: absolute;
    width: 10px;
    z-index: 99;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
}

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 mobile navigation panel fails to open

I have a menu that I would like to toggle hide/show by adjusting its top position. Before logging in, the menu is structured as follows: <div class="lc"> <h1><a href="./"><img src="logo.png" /></a></h1> <a h ...

jqueryhtmlcss

Eliminate the preset padding on the left and right sides of the container-fluid in Bootstrap 5

How can I remove the default padding-left and padding-right in a container-fluid using Bootstrap 5? I don't want to use "!important" in my CSS file. I have already tried disabling the default padding with Chrome dev tools but it didn't work. Any ...

htmlcsstwitter-bootstrapbootstrap-5

EJS: Warning when the "<%= %>" tag is used multiple times within the code

I am currently working on incorporating EJS with Node.js and Express.js. I have defined an array variable called "kindOfDay" containing the names of days as strings, such as "Sun", "Mon"... Within the EJS views folder, there is a file named list.ejs. The i ...

htmlnode.jsexpressejs

What is the best way to make a container 100% tall and display a navigation bar?

Struggling to properly render my React page This is what I have: ReactDOM.render( <React.StrictMode> <Provider store={store}> <Router /> </Provider> </React.StrictMode>, document.getEl ...

javascripthtmlcssreactjs

Switching over to styled components from plain CSS using a ternary operator

Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've ...

javascriptcssreactjsmaterial-uistyled-components

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected. ...

htmlcssbootstrap-5

Any solutions for repairing the hyperlink within the modal class on Bootstrap 5?

I've created a template to display posts, each with its own post.id. There's also a button that triggers a modal, and the "yes" button within the modal should delete the post with the corresponding post.id that I clicked on. However, when I cli ...

htmldjangobootstrap-5

Issue with exchanging columns in Bootstrap version 5.0

Seeking assistance! I am a beginner with bootstrap and struggling to figure out an issue I'm experiencing. In the attached image(s), my goal is to have the coin image positioned above its corresponding text on the left side when the screen size is red ...

cssbootstrap-5

Implementing Node.js with browser cache and handling 304 responses

I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...

javascripthtmlnode.jshttphttp-headers

Using html-mode in emacs to create a hyperlink

My image src text in emacs has become clickable. I would like to have plain text instead. How can I disable this feature? <img src="index_new_menus_files/menu_bg_2.gif" alt="" border="0" height="55" width="150"> Instead, I want it to be: <img s ...

htmlemacs

Tips on changing font color within an email body in Outlook using a C#.NET Windows application

While working on a c#.net windows application, I encountered an issue with setting font color for specific lines in the email body when sending mail to Outlook. Despite trying various methods, I was unable to find a solution. Below is a snippet of my code: ...

c#htmlfontsoutlook

PhoneGap redirect page feature

When using PhoneGap, I have encountered an issue with opening internal links. Despite using the href tag in my HTML, I am unable to load the webpage. Can someone please advise on how to properly redirect from one HTML page to another within PhoneGap? ...

iphoneioshtmlcordova

Tips for utilizing flexbox to position a button to the right of an InputSelect

Struggling to position a button next to a dropdown? No matter what I attempt, the button keeps ending up above the dropdown. Ideally, I'd like it to appear alongside 'Select Organisation' as shown in the image below: https://i.sstatic.net/w ...

c#css.netflexboxblazor

Creating a bottom bar using React and Material UI

I'm currently working on implementing a footer that will be displayed on every page of my Next.js application. To style this, I am utilizing Material UI. The following component is responsible for defining the layout across all pages of the app: impo ...

cssreactjsmaterial-ui

The functionality of the delete button in Datatables is only operational on the initial page, failing to

My datatable is giving me trouble. The delete button in the action column only works on the first page, but not on the other pages. Here is the code for my delete button: <table id="example" class="table table-striped table-bordered" cellspacing="0" wi ...

javascriptjqueryhtmlajaxdatatables

The issue with material-ui 0.15.2 is that it applies extra vendor-prefixed styles on the server side but not on the client side, resulting in warnings in React 15

I have set up my project with the following configurations: react is at version 15.2.1 material-ui is at version 0.15.2 I am using express and universal-router for server-side rendering Every time I include a material-ui component, I encounter this erro ...

cssreactjsmaterial-uiisomorphic-javascriptvendor-prefix

Display a tooltip when you click on a different element

I have a unique feature that I want to implement on my website. The idea is to display a tooltip when a user clicks on a specific div with the same ID as the tooltip. This will be particularly useful for interactive questions where users can click and reve ...

jqueryhtmlcsstooltip

Is it possible to center the background button in bootstrap?

Having an issue with the alignment of the + sign on the bootstrap button, it's not centered as shown in this image : https://i.sstatic.net/lxacy.png. Attempted to enclose the button within a div using justify-content-center align-content-center text ...

cssbootstrap-4

The Feedback Form jQuery is not providing any data

I'm facing an issue with my html page that includes an ajax query to a php file. The purpose of this php file is to send a message and then return a response to the ajax query. However, no matter what I try, I am unable to receive any response from th ...

phpjqueryhtmlajaxphpmailer

Learn the steps to include an HTML checkbox in an AJAX HTML editor

I need help with adding an HTML checkbox to an Ajax HTML editor in ASP.NET. I have attempted to do this but am having trouble checking and unchecking it. Below is the code snippet that I have tried. Any suggestions would be greatly appreciated. webform.as ...

htmlasp.netajax