We Keep Coding

Change all <a> tags color in a <li> with Javascript

At the moment I am only able to change the first a tag within my list with Javascript.
When scrolling up all the a tags in the list should be going black but only the first a tag in list seems to be affected.
The final result should be when scrolling up a tags ( letters) turn black and when scrolling down they turn white with black background
HTML
<header>
<nav>
<div class="menu-container" id="nav-menu">
<!-- <img class="logo" src="pics/logo.png" width="50" height="50" alt="logo"> -->
<div id="nav-class" class="aw-burger-open">
<ul class="menu-navigation">
<li><a class="sec section-home" href="#">Home</a></li>
<li><a class="sec section-contact" href="#">Productivity Hacks</a></li>
<li><a class="sec section-podcasts" href="#">Podcasts</a></li>
<li><a class="sec section-books" href="#">Books</a></li>
<li><a class="sec section-latest-posts" href="#">Latest Posts</a></li>
<li><a class="sec section-contact" href="#">Get in touch</a></li>
<li><a class="sec section-newsletter" href="#">Subscribe</a></li>
</ul>
</div>
</div>
</nav>
CSS
.menu-container img{
margin-top: 20px;
margin-left: 20px;
}
header nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
}
.menu-container{
display: flex;
flex-direction: row;
justify-content: center;
}
.menu-navigation {
display: flex;
list-style-type: none;
padding-bottom: 10px;
}
#nav-class{
padding-top: 30px;
}
#nav-class > ul > li:nth-child(7) > a{
border: 2px solid white;
border-radius: 18px;
padding:7px;
}
#nav-class > ul > li:nth-child(7) > a:hover{
background-color: white;
color:black;
}
header nav ul.menu-navigation li a {
padding: 0 16px;
font-size: 14px;
}
a:active {
text-decoration:none;
}
.menu-container a:hover{
color:#d5c8bb ;
}
a:link{
text-decoration:none;
color:white;
}
JS
var nav = document.getElementById('nav-menu')
var letters = document.querySelector('#nav-class > ul > li > a')
window.onscroll = function(){
if(window.pageYOffset > 100){
nav.style.background = 'black'
letters.style.color = 'white'
} else{
nav.style.background = '#eaebeb'
letters.style.color = 'black'
}
}

Fixed your code, as suggested in the comments. querySelectorAll instead of querySelector will fix your problem. Also need to iterate through all node children in .nav-class.
var nav = document.getElementById("nav-menu");
var letters = document.querySelectorAll("#nav-class > ul > li > a");
window.onscroll = function () {
if (window.pageYOffset > 100) {
nav.style.background = "black";
letters.forEach((letter) => (letter.style.color = "white"));
} else {
nav.style.background = "#eaebeb";
letters.forEach((letter) => (letter.style.color = "black"));
}
};
.menu-container img {
margin-top: 20px;
margin-left: 20px;
}
header nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
}
.menu-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.menu-navigation {
display: flex;
list-style-type: none;
padding-bottom: 10px;
}
#nav-class {
padding-top: 30px;
}
#nav-class > ul > li:nth-child(7) > a {
border: 2px solid white;
border-radius: 18px;
padding: 7px;
}
#nav-class > ul > li:nth-child(7) > a:hover {
background-color: white;
color: black;
}
header nav ul.menu-navigation li a {
padding: 0 16px;
font-size: 14px;
}
a:active {
text-decoration: none;
}
.menu-container a:hover {
color: #d5c8bb;
}
a:link {
text-decoration: none;
color: white;
}
body {
min-height: 1000px;
}
<header>
<nav>
<div class="menu-container" id="nav-menu">
<!-- <img class="logo" src="pics/logo.png" width="50" height="50" alt="logo"> -->
<div id="nav-class" class="aw-burger-open">
<ul class="menu-navigation">
<li><a class="sec section-home" href="#">Home</a></li>
<li><a class="sec section-contact" href="#">Productivity Hacks</a></li>
<li><a class="sec section-podcasts" href="#">Podcasts</a></li>
<li><a class="sec section-books" href="#">Books</a></li>
<li><a class="sec section-latest-posts" href="#">Latest Posts</a></li>
<li><a class="sec section-contact" href="#">Get in touch</a></li>
<li><a class="sec section-newsletter" href="#">Subscribe</a></li>
</ul>
</div>
</div>
</nav>

I have a problem changing menu link colors when scrolling

I am trying to change my navbar link colors when scrolling then if the position at top they have to be with the main color ,
i tried adding and removing classes with jquery but when the first i scroll they change forever else i have to refresh the page
**
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.navba , a:visited').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color: white;
background-color: blue;
margin: auto;
margin-top: 10px;
padding-top: 30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color: black;
margin: auto;
padding-top: 20px;
}
a.color-change {
text-decoration: none;
color: black;
}
/*make sure the content is tall enough to scroll for this example*/
div.content {
min-height: 2000px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="content"></div>
**

It looks like you may just have a typo on the line:
$('.navba , a:visited').removeClass('color-change');
However, a more direct way to undo the changes is to directly target the changed elements:
$('.color-change').removeClass('color-change');
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.color-change').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color: white;
background-color: blue;
margin: auto;
margin-top: 10px;
padding-top: 30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color: black;
margin: auto;
padding-top: 20px;
}
a.color-change {
text-decoration: none;
color: black;
}
/*make sure the content is tall enough to scroll for this example*/
div.content {
min-height: 2000px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="content"></div>

you have missing navbar spelling, please correct it ,please refer the below code it will help you (i have updated your code).
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.navbar , a:visited').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color:white;
background-color: blue ;
margin:auto;
margin-top:10px;
padding-top:30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color:black;
margin:auto;
padding-top:20px;
}
a.color-change {
text-decoration: none;
color:black;
}
.max-height{
height : 100em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class ="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="max-height"> </div>

Submenu doesn't render correctly on screen resize (and unexpected behaviour)

I have 5 links on my vertical nav. On screen resize my vertical nav becomes a horizontal nav with three (of those 5 links) showing and another link called menu which displays the other two remaining links.
For some reason, on screen resize, when menu appears, the list content is already displayed and then when menu is clicked, it leaves the hover properties even when you're not hovering over it. Here are visuals:
1. On screen resize, it appears like this:
2. When hovering over menu:
Which is OK. I only want the links to appear when the menu link is clicked, not hovered over. But I do not understand why menu talking up two li spaces.
3. When clicking menu:
This is OK. However, note how the Menu li is now perfectly sized.
4. After clicking on menu and then moving the mouse away from the link:
As mentioned, I do not know what's causing these issues.
Here is my current approach:
$(document).ready(function() {
$(".show").click(function() {
$(".subMenu").toggleClass("active");
return false;
});
});
.site-wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
/* make divs appear below each other on screen resize */
#media screen and (max-width: 540px) {
.site-wrapper {
flex-direction: column;
}
}
ul.subMenu {
display: none;
}
.subMenu.active {
display: flex;
flex-direction: column;
}
li.show {
display: none;
}
.nav-container {
border-right: 1px solid #E4E2E2;
height: 100%;
width: 200px;
background-color: #f4f3f3;
}
.logo-holder {
text-align: center;
}
.nav {
text-align: justify;
}
nav:after {
content: "";
display: table;
clear: both;
}
.nav-link {
display: block;
text-align: left;
color: #333;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.nav ul {
width: 100%;
/* make div span div */
padding: 0px;
}
.nav ul li {
list-style-type: none;
}
.nav li:hover a {
color: #f4f3f3;
}
.active {
text-align: left;
padding-left: 15px;
text-decoration: none;
background-color: #333;
color: #f4f3f3;
}
#media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 100px;
background-color: #f4f3f3;
border-bottom: 0.5px solid #f4f3f3;
}
.nav-link {
padding: 10px;
}
.logo-holder {
overflow: hidden;
display: block;
margin: auto;
width: 40%;
}
.nav-container nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-holder {
text-align: left;
}
#navigation-div {
background-color: #f4f3f3;
margin-top: 0;
}
.socials {
display: none;
}
.hide {
display: none;
}
.show {
display: inline-block !important;
}
.nav ul li {}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
</div>
<div id="navigation-div">
<nav class="nav">
<ul>
<li><a class="nav-link active" href="">Test 1</a></li>
<li><a class="nav-link " href="">Test 2</a></li>
<li><a class="nav-link" href="">Test 3</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
<li class="show"><a class="nav-link" href="">Menu</a>
<ul class="subMenu">
<li><a class="nav-link" href="">Test 4</a></li>
<li><a class="nav-link" href="">Test 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>

Explanation:
You have so many things messed up. Most important to note is that sub elements are inheriting from main elements. For example, if we have the following HTML:
<ul id="main_menu">
<li>list item 1</li>
<li>list item 2</li>
<li>
<ul id="sub_menu">
<li>sub list item 1</li>
</ul>
</li>
</ul>
And this CSS:
#main_menu li {/* This styling will also be applied to sub_menu!! */
color: red;
}
So if you want to apply to only direct li under main menu, use > which means only direct elements, like so:
#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */
color: red;
}
Fixing the problem:
1- Add !important to sub menu:
ul.subMenu {
display: none !important;
}
2- Comment or remove this line:
.nav li:hover a {
/* color: #f4f3f3; */
}
3- Your sub menu is inheriting some unwanted styling from the main menu. Add these should fix it for you:
.subMenu a.nav-link {
background-color: #f4f3f3;
color: #333;
}
.subMenu a.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.subMenu.active {
display: block !important;
}
Here's a demo.

For some reason, on screen resize, when menu appears, the list content is already displayed
You can use jQuery's resize function to do stuff when you resize.
But I do not understand why menu talking up two li spaces.
Menu is taking up two li spaces because it contains a ul that is two spaces wide which is forcing it's width.
Adding a width to the anchor tag will make it look a little better as it won't inherit the width from the li.
a.nav-link { width: 50px;}
After clicking on menu and then moving the mouse away from the link.
Add a class to the parent of the submenu using jQuery so you can control styling.
Here's the code, hope it helps!
jQuery
$(document).ready(function() {
$(".subMenu").addClass('hide');
$(".show").click(function() {
$(".show").toggleClass('active-parent');
$(".subMenu").toggleClass("active");
$(".subMenu").toggleClass("hide");
return false;
});
});
$(window).resize(function(){
$(".subMenu").addClass('hide');
});
html
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
</div>
<div id="navigation-div">
<nav class="nav">
<ul>
<li><a class="nav-link active" href="">Test 1</a></li>
<li><a class="nav-link " href="">Test 2</a></li>
<li><a class="nav-link" href="">Test 3</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
<li class="show"><a class="nav-link" href="">Menu</a>
<ul class="subMenu">
<li><a class="nav-link" href="">Test 4</a></li>
<li><a class="nav-link" href="">Test 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
css
.site-wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
/* make divs appear below each other on screen resize */
#media screen and (max-width: 540px) {
.site-wrapper {
flex-direction: column;
}
}
ul.subMenu {
display: none;
}
.subMenu.active {
display: flex;
flex-direction: column;
}
li.show {
display: none;
}
.nav-container {
border-right: 1px solid #E4E2E2;
height: 100%;
width: 200px;
background-color: #f4f3f3;
}
.logo-holder {
text-align: center;
}
.nav {
text-align: justify;
}
nav:after {
content: "";
display: table;
clear: both;
}
.nav-link {
display: block;
text-align: left;
color: #333;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.nav ul {
width: 100%;
/* make div span div */
padding: 0px;
}
.nav ul li {
list-style-type: none;
}
.nav li:hover a {
color: #f4f3f3;
}
.active {
text-align: left;
padding-left: 15px;
text-decoration: none;
background-color: #333;
color: #f4f3f3;
}
#media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 100px;
background-color: #f4f3f3;
border-bottom: 0.5px solid #f4f3f3;
}
.nav-link {
padding: 10px;
}
.logo-holder {
overflow: hidden;
display: block;
margin: auto;
width: 40%;
}
.nav-container nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-holder {
text-align: left;
}
#navigation-div {
background-color: #f4f3f3;
margin-top: 0;
}
.socials {
display: none;
}
.hide {
display: none;
}
.nav-container nav .hide{
display: none;
}
.show {
display: inline-block !important;
}
a.nav-link {
width: 50px;
}
.active-parent a.nav-link {
color: #ffffff;
background: #333;
}
.nav ul li {}
}

No 2.
You're setting both ul to display as flex, change it so it will only applied to parent ul only
.nav-container nav>ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
Cosmetic for your second level links when user click the menu
.selected a,
.active a {
background-color: #333;
color: #f4f3f3;
}
I also added some class to make styling easier when the menu is open
$(this).toggleClass('selected');
(function($) {
$(document).ready(function() {
$(".show").click(function() {
$(this).toggleClass('selected');
$(".subMenu").toggleClass("active");
return false;
});
});
})(jQuery);
.site-wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
/* make divs appear below each other on screen resize */
#media screen and (max-width: 540px) {
.site-wrapper {
flex-direction: column;
}
}
ul.subMenu {
display: none;
}
.subMenu.active {
display: flex;
flex-direction: column;
}
li.show {
display: none;
}
.nav-container {
border-right: 1px solid #E4E2E2;
height: 100%;
width: 200px;
background-color: #f4f3f3;
}
.logo-holder {
text-align: center;
}
.nav {
text-align: justify;
}
nav:after {
content: "";
display: table;
clear: both;
}
.nav-link {
display: block;
text-align: left;
color: #333;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.nav ul {
width: 100%;
/* make div span div */
padding: 0px;
}
.nav ul li {
list-style-type: none;
}
.nav>li:hover a {
color: #f4f3f3;
}
.active {
text-align: left;
padding-left: 15px;
text-decoration: none;
background-color: #333;
color: #f4f3f3;
}
.selected a,
.active a {
background-color: #333;
color: #f4f3f3;
}
#media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 100px;
background-color: #f4f3f3;
border-bottom: 0.5px solid #f4f3f3;
}
.nav-link {
padding: 10px;
}
.logo-holder {
overflow: hidden;
display: block;
margin: auto;
width: 40%;
}
.nav-container nav>ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-holder {
text-align: left;
}
#navigation-div {
background-color: #f4f3f3;
margin-top: 0;
}
.socials {
display: none;
}
.hide {
display: none;
}
.show {
display: inline-block !important;
}
.nav ul li {}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
</div>
<div id="navigation-div">
<nav class="nav">
<ul>
<li><a class="nav-link active" href="">Test 1</a></li>
<li><a class="nav-link " href="">Test 2</a></li>
<li><a class="nav-link" href="">Test 3</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
<li class="show"><a class="nav-link" href="">Menu</a>
<ul class="subMenu">
<li><a class="nav-link" href="">Test 4</a></li>
<li><a class="nav-link" href="">Test 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>

Input box wrong positioning in menu

I tried to add an input box to the most right side of the bar on the same line as those menu bars, but everytime its positioned bad or its not even there. Can you help me with this? It needs to be in the menu bar because of my JS hide-on-scroll function. I'm trying to use JQuery-ui's
DatePicker ("$(function() {
$("#datepicker").datepicker();
});")
HTML:
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tretie {
right: 0;
}

check this fiddle. what i did was, made your nav display as block. and centered it with margin:auto. then added the text bar next to it. made it float and with margin-top i moved it up so it's in right place.
<body>
<!--MENU BAR!-->
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
<input type="text" class="tib" />
</nav>
body,nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* menu*/
nav {
display: inline-block;
position: fixed;
width: 100%;
/* text-align: center; */
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav ul > li > a{
text-align:center;
}
ul.nav{
margin:auto;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
/* display: inline-block; */
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tib{
float:right;
margin-top:-28px;
}

Can't center <UL>

I have this dynamic UL, and I need it to be centered in my page.
Here is my HTML:
<ul id="nav">
<li><div class="tabquad">First</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
<li><div class="tabquad">Second</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Four</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Five</div></a></li>
</ul>
</li>
<li><div class="tabquad">Third</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
</ul>
My CSS:
.tabquad{
color:white;
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 15em;
}
#nav li {
float: left;
width: 15em;
}
#nav li ul {
position: absolute;
width: 15em;
left: -999em;
}
.item{
color:#0E4063;
text-decoration:none;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
My JS:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
How do I center the whole thing?
Here you can find a test on jsfiddle
EDIT: I need 3 columns, all centered in my page.

Add this after your first #nav definition:
#nav {
width: 45em;
margin: 0 auto;
}
http://jsfiddle.net/GeraldS/ZGLtn/2/

If you don't want to give fixed width to the ul then add a outer div to ul and give text-align:center to the outer div
HTML
<div class="wrap">
ul goes here
</div>
CSS
.wrap{text-align:center}
DEMO

Use marginLeft and marginRight 'auto' with a width for the UL tag so that the left and right margin is automatically taken. For instance,
ul{
width: 300px;
margin: 0 auto; /* This center aligns the ul horizontally */
}

#nav {
width: 45em;
margin: 0px auto;
padding: 0px;
list-style: none;
}