Develop Reference

display arrow below active active ul item

how can I achive something similar to the above ?
I tried adding active-item::bofore and positioning it absolute, with top:-28px. But my arrow doesn't display. I tried giving it z-index 1000; no luck it doesn't show:
#choose-cat {
width: 100%;
overflow: hidden;
box-sizing: border-box;
background: #fff;
border: 2px solid#b6d5e2;
border-radius: 4px;
margin: 0 auto;
padding: bottom 20px;
}
css:.cat-items {
position: relative;
}
.cat-items .active-item::before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #397707;
bottom: -28px;
left: calc(50% - 10px);
}
.cat-items .active-item::before {
content: "";
display: block;
position: absolute;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="choose-cat">
<ul class="cat-items list-group list-group-horizontal list-unstyled" >
<li class="col-sm-3 active-item active cat-col">
<div class="cat-item">
<div class="cat-icon">
<i class="fa fa-car cat-icon main-color" aria-hidden="true">
</i>
</div>
<div class="cat-text">
Automative Vehicles
</div>
</div>
</li> ....
</ul>
</div>

Here is a concept on how you can achieve the desired result. Of-course not the only way.
.menu {
border-bottom: 1px solid orange;
}
.menu ul {
margin: 0;
list-style: none;
}
.menu ul li {
display: inline-block;
padding-bottom: 25px;
}
.menu ul li span {
border: 1px solid red;
display: inline-block;
padding: 10px 20px;
}
.menu ul li:hover span,
.menu ul li.active span {
background-color: green;
}
.menu ul li:hover,
.menu ul li.active {
background-image: url("https://cdn4.iconfinder.com/data/icons/geomicons/32/672416-triangle-up-256.png");
background-size: 15px;
background-repeat: no-repeat;
background-position: 50% 110%;
}
<div class="menu">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li class="active"><span>Team</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>

I've added class cat-item to li element instead of div, then
.cat-item {
position: relative;
width: 140px;
}
.cat-items .active-item::before {
content: '';
display: block;
position: absolute;
top: 40px;
left: calc(50%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #397707;
transform: translateX(-50%);
}

Horizontally scroll hidden overflow-x with buttons and JS

I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:
Link to example
.prsc {
overflow-x: hidden;
overflow-y: hidden;
display: block;
padding-top: 1px;
}
.prs {
/* the elements inside */
display: inline-block;
height: inherit;
left: 20px;
padding-bottom: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
white-space: nowrap;
float: right;
}
.Jyg {
height: 80px;
margin: -10px 2px 0;
overflow: hidden;
display: block;
}
.ichpcnt {
-webkit-overflow-scrolling: touch;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
padding: 10px 0 0;
white-space: nowrap;
width: 100%;
display: block;
}
.Iyg {
margin-right: 6px;
display: inline-block;
}
.prc {
/* the whole inner */
margin: -30px 0px 0;
padding: 10px 0px 10px 0;
position: relative;
overflow: hidden;
}
.OYi {
height: 90px;
display: block;
}
.allPlacesBtn {
font-family: cairo;
margin-top: -40px;
margin-bottom: 25px;
font-size: 45px;
display: grid;
}
.prp {
background: white;
bottom: 0;
opacity: 1;
position: absolute;
top: 11px;
width: 20px;
z-index: 10;
display: block;
}
<div class="custHdrBtns">
<div class="allPlacesBtn"></div>
<div class="OYi prc">
<div class="prsc prse">
<div class="prs">
<div class="Jyg">
<div class="ichpcnt" id="scrollArea">
<div class="Iyg">
<div class="vc_btn3-container headBtns vc_btn3-center">
link
link
link
link
link
link
link
link
link
link
link
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

the key is using white-space: nowrap;
$('#prev').on('click', function() {
$('#menu ul').animate({
scrollLeft: '-=100'
}, 300, 'swing');
});
$('#next').on('click', function() {
$('#menu ul').animate({
scrollLeft: '+=100'
}, 300, 'swing');
});
#menu {
position: relative;
}
ul {
width: 300px;
overflow: hidden;
white-space: nowrap;
display: block;
list-style: none;
padding: 0;
}
li {
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
}
li:nth-child(odd) {
background-color: yellow;
}
li:nth-child(even) {
background-color: blue;
}
#nav {
position: absolute;
top: 0;
width: 300px;
}
#prev {
display: inline-block;
position: absolute;
left: 0;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
#next {
position: absolute;
right: 0;
display: inline-block;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item7</li>
</ul>
<div id="nav">
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>
</div>

Why does this dropdown move another element?

I am creating a new navbar for my site, and using JS to open some simple hidden content divs.
I have the parent selectors where I want them, but when I click on one, it makes the other parent jump.
http://codepen.io/NaughtySquid/pen/xRYaWd
// dropdowns
function toggle_visibility(id){
event.preventDefault();
// close any open menus
// TODO
// open this menu
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
}else{
e.style.display = 'block';
}
}
.container {
margin: 0px auto;
width: 960px;
}
/* Navbar */
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.caret-down {
display: inline-block;
width: 0px;
height: 0px;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top-style: dotted;
content: "";
}
/* alerts menu */
.alerts-box {position: relative; float: right; right: 100px; color: #999; line-height: 29px;}
.alerts-box-new{background-color: #609FA9;}
.alerts-box-new:hover{background-color: #6FA8B1;}
.alerts-box-normal{background-color: #383838;}
.alerts-box-normal:hover{background-color: #4B4B4B;}
.alerts-box a {padding: 10px; height: 29px; display: block; color: #999;}
.alerts-box:hover{cursor: pointer;}
#alerts-content{
display: none;
position: relative;
float: right;
right: 65px;
top: 49px;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
}
/* user menu */
.user-box {position: relative; float: right; right: 0px; color: #999; line-height: 29px;}
#user-box-content{
display: none;
position: relative;
float: right;
right: -50px;
top: 49px;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
}
.nav-special-content ul {
list-style: none;
list-style-type: none;
padding: 0;
margin: 0;
color: #999;
}
.nav-special-content a {display: block; color: #999;}
.nav-special-content a:hover {color: #fff;}
<div class="navigation-main">
<div class="container group">
<div class="alerts-box right hide-small alerts-box-normal">
<img src="https://www.gamingonlinux.com/templates/default/images/comments/envelope-open.png" alt=""/>
</div>
<div id="alerts-content">
<div class="nav-special-content">
<ul>
<li>{:comment_count} new comments</li>
<li>{:message_count} new messages</li>
</ul>
</div>
</div>
<div class="user-box hide-small">
<img class="nav-avatar" src="https://www.gamingonlinux.com/uploads/avatars/gallery/1.png" alt="" width="49" height="49"> <span class="caret-down"></span>
</div>
<div id="user-box-content">
<div class="nav-special-content">
<ul>
<li>View Profile</li>
<li>User CP</li>
{:admin_link}
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>

Put #alerts-content in .alerts-box and add some CSS like this:
#alerts-content {
position: absolute;
float: none;
right: 0;
}

HTML/CSS text Alignment and div error

I am testing out some alignment issues i had in the past and trying to solve this.
I am trying to do two things Here.
What I want to do is move texts in green box aligned all the way to left so that its on the edge like 'SHOP BY' above. Yes Both of them.
Yes you can see from the color boxes, green boxes are not meeting exactly on the edge of its parent blue box. I tried everything. And i cannot find the solution.
Thanks in advance!
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.nav-whats-new:hover a.nav-level-1{
background: white;
color: black;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
/*li>a:hover {
background-color: white;
color:#000;
}*/
.nav-level-2 {
/* display: none; */
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: white;
text-align: left;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover{
display: block;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
background: lightgreen;
-webkit-box-flex: 0;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
font-size: 14px;
margin: 0 0 20px;
}
.main-nav .nav-links .nav-level-2 ul {
width: 100%;
margin: 0px;
padding: 0px;
background: blue;
display: block;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li {
margin-bottom: 12px;
}
.invisible{
display: none;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li a {
font-size: 13px;
line-height: 17px;
letter-spacing: .5px;
color: #000;
display: inline;
background: green;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
<ul>
<li class="invisible"></li>
<li >
This Week
</li>
<li >
This Month
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Is this what you are looking for, I just changed li and li>a
li {
vertical-align: top;
padding-top: 8px;
display: inline-block; }
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px 0px; }

Is this what u want?
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.nav-whats-new:hover a.nav-level-1{
background: white;
color: black;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding-top: 7px !important; //here is the change
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0px; //here is the change
}
/*li>a:hover {
background-color: white;
color:#000;
}*/
.nav-level-2 {
/* display: none; */
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: white;
text-align: left;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover{
display: block;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
background: lightgreen;
-webkit-box-flex: 0;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
position: relative;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
font-size: 14px;
margin: 0 0 20px;
}
.main-nav .nav-links .nav-level-2 ul {
width: 100%;
margin: 0px;
padding: 0px;
background: blue;
display: block;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li {
margin-bottom: 12px;
}
.invisible{
display: none;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li a {
font-size: 13px;
line-height: 17px;
letter-spacing: .5px;
color: #000;
display: inline;
background: green;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
<ul>
<li class="invisible"></li>
<li >
Week
</li>
<li >
This Month
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

How do i do this with hover effect with javascript/jquery?

So i am slightly new to JS and jQuery, but i know html and css very well. I want to know if this is possible to do.
I have some HTML code for a nav in an info area. I have it all set up and I have it so it calls a function on mouseover, this function turns the color of the link to white. And for mouseout it turns it black again. Now I know you can probably do this with css but I need the practice for Js/jQuery. I wrote some code and it works and all but instead it colors all the colors white and it blends in, test the code and you will see. Is there a way to only choose the selected button and color only that one. maybe with an array or something?? I dont really need to know if there is a way to do it with css, i just need to get into the habit of using js/jQuery.
Code:
function colorLink() {
$(".infoNav nav ul li a").css("color", "white");
}
function colorLinkOut() {
$(".infoNav nav ul li a").css("color", "black");
}
* {
margin: 0px;
padding: 0px;
}
.header-wrap {
position: fixed;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body {
background: #CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader {
padding: 0;
background: #666;
height: 36px;
width: 100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li {
display: inline-block;
list-style: none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a {
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover {
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo {
background: white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo p {
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p {
position: relative;
top: -100px;
}
.mainHeader .logoArea img {
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li {
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover {
background: #f18529;
color: white;
}
.infoNav nav ul li a {
text-decoration: none;
color: black;
font-family: Broadway;
font-size: 30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body {
width: 100%;
}
.mainHeader {
padding: 0;
background: #666;
height: 70px;
width: 80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li {
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a {
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo {
background: white;
height: 300px;
width: 80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<meta charset="utf-8" />
<title>Website</title>
</head>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav>
<ul>
<li><a class="active" href="Index.html">Home<br/></a>
</li>
<li>About<br/>
</li>
<li>Random
</li>
</ul>
</nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav>
<ul>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Home<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">About<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Random
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>

Use hover
function colorLink(){
$(this).find("a").css("color", "red");
}
function colorLinkOut(){
$(this).find("a").css("color", "green");
}
$('.infoNav nav li').hover(colorLink, colorLinkOut);
*{margin: 0px;
padding: 0px;}
.header-wrap{
position: fixed;
}
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body{
background:#CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader{
padding: 0;
background:#666;
height:36px;
width:100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li{
display:inline-block;
list-style:none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a{
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover{
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo{
background:white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272 ;
}
.mainInfo .miInfo p{
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p{
position: relative;
top: -100px;
}
.mainHeader .logoArea img{
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li{
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover{
background: #f18529;
color: white;
}
.infoNav nav ul li a{
text-decoration: none;
color: black;
font-family: Broadway;
font-size:30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body{
width: 100%;
}
.mainHeader{
padding: 0;
background:#666;
height:70px;
width:80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li{
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a{
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo{
background:white;
height: 300px;
width:80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo{
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav><ul>
<li><a class="active" href="Index.html">Home<br/></a></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav><ul>
<li>Home<br/></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</div>
</div>
</div>
</body>

Yes there is a way, but if you are using jQuery you'd be better hooking to the events in a jQuery way, so remove those onmouseover="colorLink()" and onmouseout="colorLinkOut()" from the html and replace your javascript for
$(function(){
$(".infoNav li").mouseover(function(){
$(this).find("a").css("color", "white");
});
$(".infoNav li").mouseout(function(){
$(this).find("a").css("color", "black");
});
});
by hooking through jQuery instead of plain javascript you can now use the "this" keyword as a reference to the element that generated the event, that's why $(this) works here, but would not work your previous code.
http://jsfiddle.net/mtd4ouj3/3/