Develop Reference

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 Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.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 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<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>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}

Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.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 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<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>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Just use display:none instead of visibility:hidden on class .nav-level-2

If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.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: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<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>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

CSS Menu- Submenu drop down positioning?

I'm currently writing a on-click drop-down menu in CSS. I want to position my div container for my submenu directly beneath my label. I've hard coded the percentage from the left on each specific container, but the second it is displayed on a larger screen, everything shifts. I know that was a wrong way to go about it, I just couldn't get anything else to work. I don't know Javascript or Jquery. What is the easiest way to achieve this look that will work on multiple browsers and screen size?
input {
opacity: .3;
margin-right: -.7em;
margin-left: 0em;
overflow: visible;
}
input + label {
color: #fff;
display: inline-block;
padding: 6px 8px 10px 24px;
background-image: black url(../images/glossyback2.gif);
height: 8px;
margin: 0;
line-height: 12px;
position: relative;
}
input:hover + label:hover {
background: #3385D6;
}
input + label + div {
margin: 0;
margin-top: 2px;
padding: 16px;
border: 1px solid;
width: 100%;
height: auto;
position: absolute;
top: 23px;
display: none;
}
input:checked + label + div {
display: block;
}
input:checked + label {
z-index: 3;
}
/* GUI styled: */
.menu {
z-index: 1000;
height: 1px;
width: 100%;
padding: 20px;
position: relative;
background-image: black url(../images/glossyback.gif);
background-color: #0066CC;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
.menu a {
text-decoration: none;
color: #fff;
}
.menu input {
display: none;
}
.menu div a {
text-decoration: none;
color: blue;
}
.menu div td:hover {
text-decoration: none;
background-color: #3385D6;
color: #ffffff;
}
.menu div input {
display: inline;
opacity: 1;
margin: 0;
}
div.menu input + label {
z-index: 1000;
padding: 0;
border-color: #ccc;
border-width: 0 1px;
height: 19px;
margin: 0 -.23em;
}
.menu label span {
z-index: 1000;
font-size: 12px;
line-height: 9px;
padding: 6px 1em 12px 1em;
display: block;
margin-top: -1px;
background-image: url(../images/glossyback.gif) repeat-x bottom left;
}
.menu label span a:hover {
background-image: black url(../images/glossyback2.gif);
}
.menu label span.startcap, .menu label span.endcap {
text-decoration: none;
z-index: 1000;
padding: 0;
background-image: black url(../images/glossyback.gif);
float: left;
width: 8px;
height: 24px;
margin-left: -6px;
}
.menu label span.endcap {
z-index: 1000;
background-image: black url(../images/glossyback.gif);
float: right;
margin-right: -6px;
}
.menu input + label + div {
position: absolute;
border: 1px solid #808080;
border-width: 2px 1px 1px 1px;
background: #F0F6FC;
text-align: left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
width: 15%;
top: 35px;
left: 35px;
}
.menu input + label + div > div p {
font-size: 12px;
line-height: 18px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: left;
z-index: 1000;
}
.menu input + label + div > div {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ABABAB;
border-width: 2px 1px 1px 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 16px;
padding-top: 5px;
background-image: url(../images/glossyback2.gif));
}
.menu input:checked + label {
background-color: #AFCEEE;
border-color: #6696CB;
z-index: 1000;
}
.menu input:checked + label span {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.startcap {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.endcap {
background-image: url(../images/glossyback.gif);
z-index: 1000;
}
<div class="menu">
<input type="radio" name="UItab" id="taba" checked="checked">
<label for="taba"><span class="startcap"></span><span>
Home</span></label>
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div style="height:5px;left:34.25%;width:10.5%">
<div>
<table>
<tr>
<td id="linka"><a href="index.php?page=user_management">
User Management</a></td>
</tr>
</table>
</div>
</div>
<input type="radio" name="UItab" id="tabc">
<label for="tabc"><span>Elements</span></label>
<div style="height:20px;left:38.5%;width:10.5%;">
<div>
<table>
<tr>
<td id="linkb"><a href="index.php?page=new_element">
New Element</a></td>
</tr>
<tr>
<td id="linkc"><a href="index.php?page=exst_element">
Existing Elements</a></td>
</tr>
</table>
</div>
</div>

Wrap the input and the menu in a container with position: relative and set to the menu position: absolute and top: 100% just like in this example:
.wrapper{
position: relative;
display: inline-block;
margin-right: 30px;
}
.my-menu{
display: none;
position: absolute;
top: 100%;
left: 0;
background: #4197CF;
width: 80px;
padding: 0 5px;
}
input:checked + label + .my-menu {
display: block;
}
<div class="wrapper">
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div class="my-menu">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
</div>
<div class="wrapper">
<input type="radio" name="UItab" id="tabb1">
<label for="tabb1"><span>Other Users</span></label>
<div class="my-menu">
<p>Element 4</p>
<p>Element 5</p>
<p>Element 6</p>
</div>
</div>
The above is a basic example just to show you how to do it. Just add your styles.

Check this example out.
I used this website as a reference to make a similar drop-down setup. This has some added features that make it a bit more flashy and fluid. Figured I'd provide an alternative so you have some options for how you want to set up your drop-downs.
HTML:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Users <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
</ul>
</li>
<li>
Elements <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
<li>Existing Elements</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.menu {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
background-color: #0066CC;
}
.menu a {
transition: all linear 0.15s;
color: white;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: #F4F9FD1;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #80B2E6;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #005CB8;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #80B2E6;
}

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/

Jquery change content on click

i need to know, how to recreate the same effect that you can see on this page:
http://www.google.it/#q=meteo
There is a nice "widget" meteo, that i'm trying to recreate on my website.
When you click on one of the next day (bottom space of the widget) the middle content change.
How i can do it the same?
P.s.: sorry for my bad english.

If you don't have to load dynamic data, you can see this widget as a simple slider. Here's an example I made for you :
$('#widget .nav li').click(function(e) {
$('#widget .nav li').removeClass('active');
$(this).addClass('active');
$('#widget .content').animate({
left: $('#widget .nav li').index(this) * -265
}, 300);
});
#widget {
position: relative;
width: 265px; height: 200px;
overflow: hidden;
border: 1px solid #bcbcbc;
}
#widget ul {
list-style: none;
margin: 0; padding: 0;
}
#widget .nav {
position: absolute; bottom: 0; left: 0;
}
#widget .nav li {
display: block;
float: left; margin: 5px 0 5px 5px;
width: 30px; height: 30px;
text-align: center; line-height: 30px;
cursor: pointer;
border: 1px solid #dedede;
}
#widget .nav li:hover,
#widget .nav li.active {
background: #efefef;
border-color: #bcbcbc;
}
#widget .content {
position: absolute; top: 0; left: 0;
display: block;
width: 1855px; height: 150px; /* 1820 = 265*7 */
}
#widget .content li {
display: block;
float: left; padding: 5px;
width: 255px; height: 150px;
text-align: center; line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="widget">
<ul class="content">
<li>Content Monday</li>
<li>Content Tuesday</li>
<li>Content Wednesday</li>
<li>Content Thursday</li>
<li>Content Friday</li>
<li>Content Saturday</li>
<li>Content Sunday</li>
</ul>
<ul class="nav">
<li class="active">Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
</div>