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

A collection of items that mysteriously affix themselves to the top of the page as

Unique Context In my webpage, I have a specific div element with the CSS property of overflow: auto. Within this scrolling div, there is structured content like this: <h3>Group A</h3> <ul> <li>Item 1</li> <li>I ...

phpjavascriptjqueryhtmlcss

Sending a variable to the resize() function in jQuery

Currently, I am working with two specific divs in my project: "#sidebar-wrapper" and ".j1". The height of ".j1" is dynamic as it changes based on its content. My objective is to set this height value to the "#sidebar-wrapper" element. I have attempted to ...

javascriptjqueryhtmlcss

Incorporate text onto an image using Semantic UI

Currently, I am utilizing Semantic UI to display images. While it is functioning well for me in terms of adding text near the image, I desire to have the text positioned on top of the image. Ideally, I would like it to be located on the lower half of the i ...

javascripthtmlcssreactjssemantic-ui

Tips for automatically scrolling to the bottom of a page and focusing on an iframe

My website features a large banner image with content followed by an embedded YouTube video within an iframe. While the webpage is responsive, on mobile devices the header appears too big and users have to scroll down to see the video. I want the webpage ...

htmlcssiframe

Arrange divs in a stack when one becomes too full

Struggling to find a pure CSS solution for this issue, so seeking advice. Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved? I h ...

htmlcssoverflow

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

javascripthtmlcssonmouseoveronmouseout

What causes the variation in size between the next/image and img HTML elements?

Two Images, Different Sizes! https://i.sstatic.net/vpoNG.jpg There seems to be a discrepancy in size between the image rendered by the next/img component and the one displayed using the img element. Interestingly, they both use the same image source and ar ...

javascriptcssreactjsnext.js

Exploring the world of using Bootstrap containers, rows, and columns

I have a good grasp on containers and columns, but I am a bit confused about rows. The example below shows a 50/50 split. <div class="container"> <div class="row"> <div class="col-md-6"> 50 / 50 Content </ ...

htmlcsstwitter-bootstrap

Alignment of Nested Accordions using BootStrap: Right Justified

I have a nested accordion that resembles the following structure: https://i.sstatic.net/HT6kS.png However, I am seeking to align them to the right so that all collapse arrows are in line. In my Plotly Dash implementation, the code looks like this: d = {& ...

cssaccordionplotly-dashbootstrap-5bootstrap-accordion

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...

javascriptcss

Is there a way to have text appear in a popup when I reach it while scrolling?

Is there a way to make the textblocks on my website increase in size or pop up when I scroll down to them? I've attempted to search for a solution online but have been unsuccessful in finding one. ...

javascripthtmlcssfrontendweb-deployment

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

I recently developed a nextjs with electron template application: Here is the link to my code on CodeSandbox: https://codesandbox.io/s/sx6qfm In my code, I have defined CSS classes in VscodeLayout.module.css: .container { width: '100%'; he ...

cssreactjsnext.js

Simple CSS for creating a "red alert badge" with a number count

Looking for the best way to display the popular red notification indicator with count in a consistent manner across various browsers. It seems tricky to achieve a design that looks seamless on all platforms, as different browsers interpret paddings differe ...

javascripthtmlcssnotificationscss-position

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

javascriptjqueryhtmlcssline

Programmatically adjusting the color of mask images - Creative image theming

Is it possible to alter the color of an image hosted on a different website? Here is a link to an example image: Is there a technique to overlay a specific color on the image and only modify certain colors, such as changing or adding a layer of light gre ...

phpjquerycsshtmlimage-manipulation

Resize a responsive grid of images

Within my slider, I have three slides with 3 images each. The layout consists of one large image on the left and two smaller ones on the right. To ensure responsiveness, I've used max-width: 100% on the images so they can scale down proportionally as ...

jquerycssresponsive-design

Ways to extend the default hover duration for the <a> title attribute (tooltip)

Is there a method to extend the length of time that a tool tip appears when using the title attribute in an HTML tag? In Internet Explorer, it seems to vanish after only around 5 seconds. Is there a way to make it last longer? ...

htmltooltiphover

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

javascriptphphtmlcss.htaccess

Issues arising from the arrangement of the menu bar

I created a navigation bar using an unordered list (ul) with list items (li). However, I encountered an issue where the items were displaying in reverse order until I applied the following CSS: .nav-bar .btn{ float: left; } .nav-bar u ...

htmlcssmenucss-floathtml-lists