CSS underline is not moving on click - html

I am trying to create sliding horizontal line on click of hyperlinks. Please have a look at:
http://codepen.io/anon/pen/JdEPPb
The HTML is:
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
text-decoration: none;
color: #333;
}
.one:active ~ hr {
margin-left: 0%;
}
.two:active ~ hr {
margin-left: 25%;
}
.three:active ~ hr {
margin-left: 50%;
}
.four:active ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: 0.3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">Uno</li><!--
--><li class="two">Dos</li><!--
--><li class="three">Tres</li><!--
--><li class="four">Quatro</li>
<hr />
</ul>
</div>
There is no javascript code.
When I click Two, I want the underline to move under Two but currently its not moving. I need to hold for longer for it to move and when I release the mouse left button, it falls back to One

:active only fires while you hold down the mouse button on the element - i.e. while you are actively clicking on the element.
You can use :target instead of :active.
The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
By giving values to the href attribute of the links and ids of the li elements we can :target the li that has been clicked on:
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
text-decoration: none;
color: #333;
}
#uno:target ~ hr {
margin-left: 0%;
}
#dos:target ~ hr {
margin-left: 25%;
}
#tres:target ~ hr {
margin-left: 50%;
}
#quatro:target ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: 0.3s ease-in-out;
}
<div class="container">
<ul>
<li class="one" id="uno">Uno</li><!--
--><li class="two" id="dos">Dos</li><!--
--><li class="three" id="tres">Tres</li><!--
--><li class="four" id="quatro">Quatro</li>
<hr />
</ul>
</div>

It moves while your mouse is still down. Your problem is that :active selector is only activated while the element is active, typically when the mouse is pressed.
You need to add the class .active instead of the :active selector. So you'd have:
.one.active ~ hr {
margin-left: 0%;
}
.two.active ~ hr {
margin-left: 25%;
}
.three.active ~ hr {
margin-left: 50%;
}
.four.active ~ hr {
margin-left: 75%;
}
And add some functionality:
var elems = document.querySelectorAll(".one,.two,.three,.four");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click",function(e){
if(document.querySelector(".active")){
document.querySelector(".active").classList.remove("active");
}
e.currentTarget.classList.add("active");
});
}
A pen: http://codepen.io/vandervals/pen/wagwBQ

here is your solution to get active link when menu is in active state.
Issue with your code is that...you have use : selector instead use . selector.
also need to use little javascript.
http://codepen.io/anon/pen/GJrKjB

Try this Fiddle.
$('ul li').on('click', function() {
$('li').removeClass('active')
$(this).addClass('active')
})

Related

Check box doesn't open up menu when toggled

I am making a responsive navbar which turns into the hamburger icon on mobile phones. I used media queries to check for mobile phones and create a hamburger icon. Then I made a mobile menu which appears and disappears when the hamburger icon gets toggled. Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Nav Bar</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<!-- Nav Bar -->
<nav>
<h2>Nav Bar</h2>
<div class="nav-left">
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="nav-right">
<a>Log In</a>
<a>Sign Up</a>
</div>
<div class="mobile-nav">
<label for="toggle"><h2>☰</h2></label>
<input type="checkbox" id="toggle">
</div>
<div class="menu"> <!-- Mobile Menu -->
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
<hr>
<a>Log In</button>
<a>Sign Up</button>
</div>
</nav>
</body>
</html>
SASS (Use Compiler):
// Fonts
#import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
margin: 0px;
padding: 0px;
}
// Navbar
nav {
width: auto;
padding: 30px;
background-color: #fafafa;
display: flex;
align-content: center;
flex-wrap: wrap;
h2 {
color: #303030;
font-family: "Mukta", sans-serif;
margin-right: 30px;
}
}
.nav-right {
margin-left: auto;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
.nav-left {
display: flex;
align-content: center;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
div.mobile-nav {
display: none;
label {
display: none;
}
#toggle {
display: none;
}
}
.menu { // Mobile Menu Styling, Display is none
width: 100vw;
font-family: "Mukta", sans-serif;
display: none;
flex-direction: column;
background-color: #fafafa;
z-index: 1000;
a {
margin: 5px 0px;
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
hr {
margin: 5px 0px;
border-color: #a3a3a3;
border-style: solid;
}
}
#media only screen and (max-width: 500px) {
div.mobile-nav {
width: auto;
height: 60px;
display: flex;
label {
display: block;
cursor: pointer;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
#toggle:checked + .menu { // Displaying the Menu
display: flex;
}
}
nav h2 {
font-size: 5vw;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}
div.nav-left {
display: none;
}
div.nav-right {
display: none;
}
}
The problem is in this line:
#toggle:checked + .menu {
display: flex;
}
When clicked on the hamburger icon, it doesn't display the menu, instead it keeps it's display to block.
Things I have tried:
Changing the display to block when the the toggle checkbox gets clicked
Setting display to none for unchecked and flex when checked as described here
Putting .menu div and #toggle checkbox in a single div as Toni Michel Caubet said (This method does work, thanks but it works with a single element like an h1, not with a div containing many elements)
Changing the combinator or grouping .menu div and #toggle checkbox after putting them in a div
EDIT:
At point 4, things started to work a bit. When I changed the + to a comma to group both of them, the menu appeared. But it didn't closed after clicking it again. I changed the display to block of the hamburger menu, and the checkbox was checked when the page got loaded. But after unchecking it, the checkbox disappeared but the menu didn't. I need a solution to this.
NOTE:
I want to make this entirely in CSS (Or SASS) without the use of JavaScript or jQuery
Thanks for the help!
Few things going on here.
As stated in the comments, the problem is that your checkbox isn't in the same container as your mobile nav.
You also have some <a> tag, closing as </button>, meaning that your html is incorrect.
Solution
Keep the label of the checkbox where it is.
Move the checkbox to be a direct sibling of .menu.
Then adjust your css to have #toggle as a selector and not div.mobile-nav #toggle.
toggle is an id, you don't need to have a stronger specificity as it's a unique element.
Short reminder of the selector: .foo + .foo2
This selector will select every element with the class .foo2 if they are the next sibling of a element with the class .foo.
Therefore, they have to be in the same parent node and be one next to each other.
<nav>
<h2>Nav Bar</h2>
<div class="nav-left">
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="nav-right">
<a>Log In</a>
<a>Sign Up</a>
</div>
<div class="mobile-nav">
<label for="toggle"><h2>☰</h2></label>
</div>
<-- I've moved the checkbox. Now the selector #toggle + .menu will work -->
<input type="checkbox" id="toggle">
<div class="menu"> <!-- Mobile Menu -->
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
<hr>
<a>Log In</button>
<a>Sign Up</button>
</div>
</nav>
// Fonts
#import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
margin: 0px;
padding: 0px;
}
// Navbar
nav {
width: auto;
padding: 30px;
background-color: #fafafa;
display: flex;
align-content: center;
flex-wrap: wrap;
h2 {
color: #303030;
font-family: "Mukta", sans-serif;
margin-right: 30px;
}
}
.nav-right {
margin-left: auto;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
.nav-left {
display: flex;
align-content: center;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
div.mobile-nav {
display: none;
label {
display: none;
}
}
#toggle {
display: none;
}
.menu { // Mobile Menu Styling, Display is none
width: 100vw;
font-family: "Mukta", sans-serif;
display: none;
flex-direction: column;
background-color: #fafafa;
z-index: 1000;
a {
margin: 5px 0px;
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
hr {
margin: 5px 0px;
border-color: #a3a3a3;
border-style: solid;
}
}
#media only screen and (max-width: 500px) {
div.mobile-nav {
width: auto;
height: 60px;
display: flex;
label {
display: block;
cursor: pointer;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
}
#toggle { //#toggle is on it's own now, it doesn't need more specificity
visibility: hidden;
height: 0;
width: 0;
}
#toggle:checked + .menu { // Displaying the Menu
display: flex;
}
nav h2 {
font-size: 5vw;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}
div.nav-left {
display: none;
}
div.nav-right {
display: none;
}
}

How to slide line in css?

https://imgur.com/a/V2W5jTZ (If you can't see the image)
When I click on one heading the line should appear, but when I click on another heading I want the line to slide to the next heading.
I have already created the same menu navigator for each heading(page), and I just display line under the page that's open
Ex:
Heading code
<p class="content">
About Us
Position
Commerical Projects
Residential Projects
</p>
After setting all the same css, i have used hr in this way:
hr{
position: absolute;
top: 100px;
right: 168px;
width: 240px;
border-color: red;
}
p a {
font-family: sans-serif;
text-decoration: none;
color: gray;
position: relative;
margin: 10px 0;
display: inline-block;
padding: 12px 10px;
}
p a::after {
content: "";
background: blue;
height: 1px;
position: absolute;
bottom: 0;
transition: .16s all 0.025s;
}
p a::after {
left: 100%;
right: 0;
}
p a:hover ~ a::after {
left: 0;
right: 100%;
}
p a:hover::after {
left: 0;
right: 0;
}
<p class="content">
About Us
Position
Commerical Projects
Residential Projects
</p>
try this :)
I'd recommend writing a css class with the desired style which you would apply to an
you will need some java-script to apply the class to the element when clicked but here's an example to get you started
https://www.w3schools.com/howto/howto_js_active_element.asp
You can use pseudo css classes to show underline for a active element(anchor tag).
There are different states of pseudo classes like active, hover, focus etc
Most probably you can use focus class to solve your problem. (active and hover can also be used to handle different scenarios )
Here is an example to solve your problem
a {
text-decoration: none;
}
a:focus {
border-bottom: 1px solid red;
}
also instead of text-decoration: underline; you may use border-bottom: 1px solid red; which is more clear under line.
Here is full css code which may help you to better understand the solution :
/*To hide the default behaviour of <a> tag*/
a {
text-decoration: none;
}
/***By using text-decoration: underline;***/
/* a:active, a:focus, a:hover {
text-decoration: underline;
} */
/***To handle different cases***/
/* a:active, a:focus, a:hover {
border-bottom: 1px solid red;
} */
/***Final solution - to handle your requirement***/
a:focus {
border-bottom: 1px solid red;
}
You can also use the commented code by uncommenting it check different scenarios.
You can check this link for details on how to build it: https://codepen.io/arjunamgain/pen/lGALt
This should be good enough to achieve the desired functionality. Instead of the red background in the css section just use a border rule, like:
border-bottom: 4px solid #d90000;
You can use something like this
$(document).ready(function() {
var $slider = $('nav .slider'),
width = $('nav ul li').width;
$slider.width(width);
});
$(window).resize(function() {
var $slider = $('nav .slider'),
width = $('nav ul li').width,
$isActive = $('nav ul li.isactive'),
isX = $isActive.position().left,
isW = $isActive.width();
$slider.width(width);
$('nav ul li').each(function() {
var x = $(this).position().left,
w = $(this).width();
$(this).on({
mouseenter: function() {
$slider.css({
left: x,
width: w
});
},
mouseleave: function() {
$slider.css({
left: isX,
width: isW
});
}
});
});
}).resize();
*,
*:before,
*:after {
box-sizing: border-box;
}
a {
color: #ea3830;
text-decoration: none;
}
nav {
position: relative;
width: 100%;
max-width: 960px;
min-width: 400px;
height: 50px;
margin: 25px auto;
border-bottom: 3px solid #eee;
text-align:center;
}
nav .slider {
position: absolute;
bottom: 0;
width: 25%;
height: 3px;
box-shadow: 0 3px #ea3830;
transition: all 0.3s ease-in-out;
}
nav ul {
padding: 0;
height: 50px;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
nav ul li {
width: 25%;
height: 50px;
flex: 25%;
line-height: 50px;
list-style: none;
}
nav ul li a {
padding: 0 25px;
display: block;
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class='slider'></div>
<ul>
<li class='isactive'>
<a href='#'>Index</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Work</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
</ul>
</nav>
Here you go man try this :)
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">About Us</li><!--
--><li class="two">Position</li><!--
--><li class="three">Commerical Projects</li><!--
--><li class="four">Residential Projects</li>
<hr />
</ul>
</div>

How does the underline in this menu work?

I am learning html/css at the moment and was playing around with this piece of code here.
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">Uno</li><!--
--><li class="two">Dos</li><!--
--><li class="three">Tres</li><!--
--><li class="four">Quatro</li>
<hr />
</ul>
</div>
I tried editing it to stop the underline from returning back to its original location (at margin-left: 0%;), but have found that no matter what I do, the underline always returns back to its original position.
So far I have tried doing the following:
hr { margin-left: 25%; ...)
to forcefully attempt to move the underline over to the second tab.
And also the following:
.two:active ~ hr { margin-left: 25%; ...}
on an actual html file I created and attempted to move the underline this way by clicking the link.
Finally, I also tried creating 2 identical html files but with the following difference between the two:
<li class="one" id="active">Uno</li>
and
<li class="two" id="active">Dos</li>
and attempted to try manipulate the underline when the page changes but this also failed.
I've also tried looking at this code here but some stuff here such as 'nth-child', I still have not learnt so it hasn't helped me much, other than giving me the idea to try out the 3rd attempt I wrote above.
I would love to find out what exactly is causing the underline to return back to its position everytime and if there's an easy way to fix this particular code.
Just add it as another rule for the hover styles with an additional active class and without the :hover (e.g. .active.two ~ hr). The have correct specificity (and not break the hover effect) you need to give some additional weight to the hover selector.
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
li.one:hover ~ hr, .active.one ~ hr {
margin-left: 0%;
}
li.two:hover ~ hr, .active.two ~ hr {
margin-left: 25%;
}
li.three:hover ~ hr, .active.three ~ hr {
margin-left: 50%;
}
li.four:hover ~ hr, .active.four ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">Uno</li><!--
--><li class="two">Dos</li><!--
--><li class="three active">Tres</li><!--
--><li class="four">Quatro</li>
<hr />
</ul>
</div>
Here's an HTML validation compliant version (Noticed this after Pangloss' comment):
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
li.one:hover ~ li hr, .active.one ~ li hr {
margin-left: 0%;
}
li.two:hover ~ li hr, .active.two ~ li hr {
margin-left: 25%;
}
li.three:hover ~ li hr, .active.three ~ li hr {
margin-left: 50%;
}
li.four:hover ~ li hr, .active.four ~ li hr {
margin-left: 75%;
}
li hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">Uno</li><!--
--><li class="two">Dos</li><!--
--><li class="three active">Tres</li><!--
--><li class="four">Quatro</li>
<li><hr></li>
</ul>
</div>
I think it is part of the concept that on this page the underline always returns to the first menu item, since you ARE on that page - the animation is just a replacement for the usual regular hover styles for menu links.
Once you are on the second page you would change the margin-left settings accordingly (like in my snippet below) so that the underline marks the current (= second) page and moves to the other menu items when hovered. This is done by setting the margin-left of hr to the desired position (0, 25%, 50% or 75%). And the same principle would apply to the other pages.
EDIT: The hover styles for the other positions DO NOT have to be adjusted. The only thing that has to be added on the other pages is the different margin setting for hr, which can be done in the <head> tag of each page, inside a <style> tag:
<style type="text:css">
.container hr {
margin-left: 25%;
}
</style>
Here's a complete example for the second page:
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.one:hover ~ hr {
margin-left: 0;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin-left: 25%;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">Uno</li><!--
--><li class="two">Dos</li><!--
--><li class="three">Tres</li><!--
--><li class="four">Quatro</li>
<hr />
</ul>
</div>

cant see the elements of the dropdownmenü

I created a navigationbar. Now I want to expand this bar to dropdown menü.
Here is a jfiddle.
If I hover over last element, i cant see the dropdownbar (class="dropdown_ul")and if I use "examine element" I see that the css change the display of the dropdown_ul, but I cant see/find it.
.float_left {
float: left;
}
.float_right {
float: right;
}
.clear_both {
clear: both;
}
* {
margin: 0px;
padding: 0px;
font-family:"Oswald", sans-serif;
}
body {
background-color: #E2DCDC;
}
nav {
width: 994px;
background-color: #77BCF1;
border: 3px solid white;
margin: 45px auto;
color: black;
}
nav > .navigationbar_ul {
list-style-type: none;
width: 100%;
font-size: 0px;
}
nav > .navigationbar_header {
width: 100%;
text-align: center;
}
.navigationbar_li {
display: inline-block;
}
.navigationbar_li_left {
border-right: 3px solid white;
}
.navigationbar_li_right {
border-right: none;
border-left: 3px solid white;
}
.navigationbar_li:last-child {
margin-right: 0px;
}
.navigationbar_li > .navigationbar_a {
color: black;
font-size: 16px;
display: block;
padding: 10px 15px;
text-decoration: none;
transition: background-color 0.2s ease-in-out 0s;
}
.navigationbar_li > .navigationbar_a:hover {
background-color: white;
}
.dropdown_ul {
position: absolute;
top: 0px;
left: 0;
width: 150px;
visibility: hidden;
display: none;
}
.dropdown_li {
display: block;
}
.navigationbar_li:hover .dropdown_ul {
display: block;
opacity: 1;
visibility: visible;
}
<nav>
<ul class="navigationbar_ul">
<div class="float_left">
<li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 1</a></li>
<li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 2</a></li>
</div>
<div class="float_right">
<li class="navigationbar_li navigationbar_li_right"><a class="navigationbar_a" href="#">Link 3</a>
<ul class="dropdown_ul">
<li class="dropdown_li"><a class="dropdown_a">Link 1</a></li>
</ul>
</li>
</div>
<div class="clear_both"></div>
</ul>
</nav>
It is because you have specified font-size 0 here
nav > .navigationbar_ul {
font-size: 0px;
}
Change the 0px to i.e. 14px and you will see the text.
You got to do 3 things.
Semantically it is wrong to add div in ul right after, instead of li. So remove .float_left and .float_left divs and add this class to li itself.
Add position: relative; to .navigationbar_li_right so that absolutely positioned .dropdown_ul will display right down like a drop down menu as you have asked.
Increase the font-size when you hover .navigationbar_li_right
http://jsfiddle.net/6Lf0wpvz/4/
EDIT
Change .navigationbar_li:hover .dropdown_ul to:
.navigationbar_li:hover .dropdown_ul {
display: block !important;
opacity: 1;
visibility: visible !important;
}
You need to add !important in order to override the previous display:none and visibility:hidden
By the way, you might as well ditch the visibility:hidden when declaring display:none
Hope this helps!

Change css of list item before an after the item that is being hovered over

I've created navigation menu for my website. Here's the html: (you can also view the sidebar menu at belairfinishing.com, its the menu on the left.)
<div><img src="../public/images/skystatic.jpg" id="LinkForBannerImage"></div>
<ul>
<li>Proccess Technology</li>
<li>Equipment</li>
<li>Media & Compounds</li>
<li>Parts Cleaners & Dryers</li>
<li>Waste Water Treatment</li>
<li>Precious Metal Recovery</li>
<li>Consulting</li>
<li>Technical Articles</li>
<li>Press Releases</li>
<li>Toolhoning.com</li>
<li>Distributor Log In </li>
</ul>
</div>
Basically what I would like to happen is that when you hover over one of the items, ONLY the items directly before an after that get a red border. So if someone were to hover over Consulting, then Technical Articles and Precious Metal Recovery will have red borders.
I've been looking this up all morning and haven't found anything that works. So far I've tried to use nth-child(-n) and nth-child(n) to get 1 above an 1 below but I can't get that to actually work. Am I messing up the syntax or is their a better solution for this problem?
Thanks for the help!
Using CSS you could only select the next element using the adjacent sibling selector(+), however CSS doesn't have a previous sibling selector.
This could be achieve using jQuery.
$('li').hover(
function() {
$(this).next().find('a').addClass('highlight');
$(this).prev().find('a').addClass('highlight');
},
function() {
$(this).next().find('a').removeClass('highlight');
$(this).prev().find('a').removeClass('highlight')
})
#cssmenu {
text-align: center;
}
ul {
padding: 0;
list-style: none;
white-space: nowrap;
}
li {
display: inline-block;
vertical-align: top;
}
a {
display: block;
text-decoration: none;
width: 130px;
height: 50px;
line-height: 50px;
color: white;
background: #222;
box-sizing: border-box;
}
a:hover {
color: rosybrown;
}
.highlight {
border-bottom: 4px solid rosybrown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<ul>
<li class="active">Home</li
><li>About Us</li
><li>Contact Us</li
><li>Trade Shows</li
><li>Vibratory Workshops</li
><li class="last">Directions</li>
</ul>
</div>
Edit
You could also make it work using CSS alone.
The idea is to add a :before :pseudo-element to a on :hover, if the a is not a descendant of first li and :after :pseudo-element, if the a is not a descendant of the last li.
i.e, li:not(:first-child) a:hover:before, li:not(:last-child) a:hover:after.
In simple words, it won't add the line on the left if the li is the first element and won't add the line on the right if the li is the last element.
body {
margin: 0;
}
#cssmenu {
text-align: center;
margin: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
}
li {
display: inline-block;
vertical-align: top;
}
a {
position: relative;
display: block;
text-decoration: none;
width: 130px;
height: 50px;
line-height: 50px;
color: white;
background: #222;
box-sizing: border-box;
}
a:hover {
color: rosybrown;
}
li:not(:first-child) a:hover:before, li:not(:last-child) a:hover:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
left: -100%;
bottom: 0;
border-bottom: 4px solid rosybrown;
box-sizing: border-box;
}
li:not(:last-child) a:hover:after {
left: 100%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<ul>
<li class="active">Home</li
><li>About Us</li
><li>Contact Us</li
><li>Trade Shows</li
><li>Vibratory Workshops</li
><li class="last">Directions</li>
</ul>
</div>