When hovering over a single list item, only the top border will be displayed without affecting the

Check out the live link provided below:

I am attempting to add a border and later an arrow in the middle on hover in the menu. However, the current code places a border over the entire menu, with individual list items on top of that.

#menu ul li {
margin-top: -50px;
padding-top: 50px;
float: right;
margin-right: 30px;
display: inline-block;
}
#menu li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}

Using a:hover does work, but I have not been able to find a way to position the border above everything else. I anticipate facing similar issues when trying to include the arrow caret as well.

Thank you.

cssmenuhover

Answer №1

Give this a shot:

.menu-menu-1-container li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}

Alternatively, you can try:

#menu li li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}

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

stopping a float-left div from being pushed down by a table

I am facing an issue with two float:left divs that are supposed to stack left-to-right. One div is a fixed width left nav, while the other should span the remaining width of the browser. The problem arises when there is a table in the second div with multi ...

css

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

javascriptjquerycsscss-transforms

What is the best way to have an image fill the remaining space within a 100vh container automatically?

I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining availabl ...

htmlcss

Identify the element with the active class name as the primary focus

Can anyone assist with this issue? Below is an example of the code I am working with: import React, { useRef, useEffect } from "react"; function App() { const inputRef = useRef(null); useEffect(() => { const testElement = document.qu ...

htmlcssreactjsjsx

Center-aligned video text overlay that adapts to different screen sizes for a responsive design

I am looking to showcase a full-width video with overlay text that is perfectly centered both vertically and horizontally on the video. The centering should adapt to changes in viewport width so that it remains centered at all times. Additionally, I would ...

htmlcssvideooverlay

Creating a dynamic animation effect on a div with a changing number of child elements

Currently, I am utilizing the nganimate library and have implemented an animation that affects the max-height property of a div. Here is a snippet of my code: CSS .sublist.ng-hide { max-height: 0; } .sublist { max-height: 1300px; overflow: hidden; ...

cssangularjsng-animate

The parent div will not accommodate two nested divs

I'm having an issue with two divs inside a parent div not being contained within the container when I inspect the page, even though I've wrapped the div around the other 2 divs. My goal is to apply attributes to the parent div instead of each in ...

htmlcss

Implement a transition effect for when elements change size using the `.resizable().css` method

I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method. The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating ...

javascripthtmljquerycss

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

javascripthtmlcssangularjsangular-material

Utilizing the hcSticky plugin for creating a scrolling effect on webpage content

I'm attempting to utilize the JQuery plugin, hcSticky, in order to achieve a scrolling effect on my fixed content. However, I seem to be encountering some difficulty getting it to function properly. What could I possibly be doing incorrectly? JSFIDDL ...

jqueryhtmlcss

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

At the moment, I am utilizing ReactJS along with Material-UI. One issue I am encountering is that when using Material-UI's <Table>, the columns' width are automatically set based on content which results in all columns having equal width. H ...

javascripthtmlcssreactjsmaterial-ui

Creating a circular shape with a radius that can be adjusted

I'm trying to create an expanding bubble-like circle of various colors when clicked on a blank page. The circle should continue increasing in size each time it is clicked, only stopping when the mouse click is released. I am looking to use HTML, CSS, ...

javascripthtmlcss

Develop and arrange badge components using Material UI

I'm new to material ui and I want to design colored rounded squares with a letter inside placed on a card component, similar to the image below. https://i.stack.imgur.com/fmdi4.png As shown in the example, the colored square with "A" acts as a badge ...

javascriptcssreactjsmaterial-ui

Commencing CSS Animation Post Full Page Loading

I am looking for a solution using WordPress. In my specific case, I want the CSS Animations to take effect only after the page has completely loaded. For example: click here This is my HTML: <div class="svg-one"> <svg xmlns="ht ...

javascriptcsswordpresssvgcss-animations

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

htmlcssangulartypescriptvaadin

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS? https://mui.com/components/buttons/ The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend. I attempted to o ...

javascriptcssreactjsmaterial-ui

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...

javascriptjqueryhtmlcss

Webpack is failing to recognize certain CSS files

My development stack includes Vue.js 2.5.15, Webpack 4.12.0, css-loader 0.28.11, ASP.Net Core 2.1 in Visual Studio 2017. Starting with the Visual Studio asp.net core template project for Vue and Typescript, I prefer to have individual small CSS files with ...

csstypescriptwebpackvue.jscss-loader

I am getting text content before the input element when I log the parent node. What is causing this issue with the childNodes

Does anyone know why 'text' is showing up as one of the childNodes when I console.log the parent's childNodes? Any tips on how to fix this issue? <div id="inputDiv"> <input type="text" id="name" placeholder="Enter the nam ...

javascripthtmlcssdomnodelist

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3