Adding a border-top overlay to vertical navigation

Question

Adding a border-top overlay to vertical navigation

I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle):

<style>
ul{
  list-style-type: none;
}

li{
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
}
</style>

<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

Currently, when I hover over a list item, the background color changes to blue but the surrounding dashed border remains. I want the hovered list item to have a solid border instead of dashed, and I also want the next list item to have a solid border when its previous sibling is hovered. However, I don't want to use JavaScript for this. Is there a simple way to achieve this effect?

Here is an example of what I want to achieve on hover:

https://i.sstatic.net/LLYdt.png

And here is what I currently get:

https://i.sstatic.net/KzVQB.png

I initially thought about setting both border-top and border-bot of each list item to dashed, then changing them to solid on hover. But this would result in two dashed lines surrounding the hovered item.

If anyone has a good solution for this styling issue, I would appreciate the help!

html css

Answer 1

Answer №1

One way to update your code is by making changes to the next sibling element, illustrated in this example:

li:hover + li {
  border: solid 1px #08C;
}

To view the modified version, please refer to the Revised fiddle

The latest adjustments have been implemented based on feedback received.

ul {
  list-style-type: none;
}
li {
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}
li:hover {
  background-color: #08C;
}
li:hover + li {
  border-top: solid 1px #08C;
}

<ul>
  <li>Abc</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
</ul>

Answer 2

One way to update your code is by making changes to the next sibling element, illustrated in this example:

li:hover + li {
  border: solid 1px #08C;
}

To view the modified version, please refer to the Revised fiddle

The latest adjustments have been implemented based on feedback received.

ul {
  list-style-type: none;
}
li {
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}
li:hover {
  background-color: #08C;
}
li:hover + li {
  border-top: solid 1px #08C;
}

<ul>
  <li>Abc</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
</ul>

Answer 3

Answer №2

To achieve the desired effect of having the hover background cover the border, you can apply a negative margin-top to each li:

ul{
  list-style-type: none;
}

li{
  display: block;
  margin:-2px 0 0 0;
  padding: 10px;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
}

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Answer 4

To achieve the desired effect of having the hover background cover the border, you can apply a negative margin-top to each li:

ul{
  list-style-type: none;
}

li{
  display: block;
  margin:-2px 0 0 0;
  padding: 10px;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
}

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Answer 5

Answer №3

My vote goes to ochi's response, however, I would like to introduce an alternative solution utilizing the outline property:

ul{
  list-style-type: none;
}

li{
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
  outline:1px solid #08C;
}

<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

The effect of the outline property is simply to paint over the border.

Likewise, using

box-shadow: 0px 1px 0px 0px #08C;

does not obscure the dotted border but instead shines through in between the dots.

Answer 6

My vote goes to ochi's response, however, I would like to introduce an alternative solution utilizing the outline property:

ul{
  list-style-type: none;
}

li{
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
  outline:1px solid #08C;
}

<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

The effect of the outline property is simply to paint over the border.

Likewise, using

box-shadow: 0px 1px 0px 0px #08C;

does not obscure the dotted border but instead shines through in between the dots.

Answer 7

Answer №4

Hey there, I'm a newcomer around here but I'd love to share my thoughts on your question:

Here are some solutions that I believe could be beneficial:

Have you heard of the CSS "nth-child" selector? It can assist you in customizing your block elements to suit your needs. For example, you could try this:

p:nth-child(odd) {
      color: green;
    }

<html>

<head>
</head>

<body>
  <p>use the nth child</p>
  <!...odd 1...>
  <p>use the nth child</p>
  <!...even 2...>
  <p>use the nth child</p>
  <!...odd 3...>
  <p>use the nth child</p>
  <!...even 4...>
  <p>use the nth child</p>
  <!...odd 5...>
  <p>use the nth child</p>
  <!...even 6...>
</body>
<html>

This will result in those odd block elements turning green.

Given your experience with HTML, you may find this example useful for styling your list items' background and hover effects.

You can use other values as well for the sequence numbers you want the style to apply to.

Thanks!

Answer 8

Hey there, I'm a newcomer around here but I'd love to share my thoughts on your question:

Here are some solutions that I believe could be beneficial:

Have you heard of the CSS "nth-child" selector? It can assist you in customizing your block elements to suit your needs. For example, you could try this:

p:nth-child(odd) {
      color: green;
    }

<html>

<head>
</head>

<body>
  <p>use the nth child</p>
  <!...odd 1...>
  <p>use the nth child</p>
  <!...even 2...>
  <p>use the nth child</p>
  <!...odd 3...>
  <p>use the nth child</p>
  <!...even 4...>
  <p>use the nth child</p>
  <!...odd 5...>
  <p>use the nth child</p>
  <!...even 6...>
</body>
<html>

This will result in those odd block elements turning green.

Given your experience with HTML, you may find this example useful for styling your list items' background and hover effects.

You can use other values as well for the sequence numbers you want the style to apply to.

Thanks!

Adding a border-top overlay to vertical navigation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The v-select menu in Vuetify conceals the text-field input

Using CSS to conceal an element when a different element is also invisible

PHP code that removes a table row from a database

update url to redirect hashbang with history.js

Hide multiple divs with similar ids in JQuery when clicking outside of them

How can I combine an ordinary image and a CSS2D image in THREE.js CSS2DRenderer and save them together as a single .jpg file?

Using justify-content-between in a div container with only two items will not produce the desired effect

I am struggling to capture the user's input and display it on a webpage using HTML and JavaScript. Can you help me identify where I may be going wrong in this process?

Embedding a CSS class within the primary class selector

"Vanishing Act: Bootstrap menu vanishes after a click

How to print a specific div from an HTML page with custom dimensions

Joining Two Texts in HTML with a Link Embedded within

The colors of my SVG button remain constant and do not dynamically change when I hover over it

The value within the style.setProperty function does not get applied

I am struggling to make my table adapt to different screen sizes and become

Inspect the data attribute and modify the class

Having Numerous HTML Tables All in One Page Accompanied by Written Content

Display a specific element only if another element exceeds a specified height

Is there a way to create a navigation menu that highlights as we scroll down the page?

What is the best way to choose the first parent element that includes a specific class within it?