Develop Reference

Attempting to add a delay to a Jquery dropdown for a navigation menu

I am attempting to add a delay to this Jquery dropdown. I have tried to use the setTimeout function but this doesn't appear to be working.
I don't know why this isn't working as the delay doesn't happen when I hover over the menu and the submenu drops down immediately. How can I get this to work?
Edit: I'll have to clarify specifically what i want to do. I have a Menu with some submenus. When I hover over the Menu Item, for example 'About', I want a brief delay of 3 seconds before the submenu slides out. Currently, It slides out immediately and this creates an unwanted effect when I quickly move from one Menu item to another. For example, if I move from About to Fees, it shows both submenus at the same time. Basically this is what is happening when I scroll over the menu Items very quickly
https://i.imgur.com/Nv554m9.png
I'm new to Jquery and Javascript and web programming in general, so although I've gone through several similar questions on StackOverFlow, they don't seem to solve my problem. Any assistance will be appreciated.
<script type="text/javascript">
$(document).ready(setTimeout(function() {
$( '.dropdown' ).hover(
function(){
$(this).children('.dropdown-content').slideDown(200);
},
function(){
$(this).children('.dropdown-content').slideUp(0);
}
);
}), 3000);
</script>
EDIT:
This is the HTML of the Menu
<ul id="menu">
<li> Home </li>
<li class="dropdown" >
About
<div class = "dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School&nbspLife
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</li> -->
</ul>
And the CSS
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link{
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover{
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
ul li .dropdown-content a:link{
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link{
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a{
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}

$(document).ready(setTimeout(function(){}, 3000)) does not delay .slideDown() call at each event dispatched by .hover(); rather, delays call of function passed to setTimeout() at .ready() call for 3000.
You can use .delay(). Also call .clearQueue() chained to $(this).children('.dropdown-content') at function passed to second parameter of .hover() to clear the element queue of .slideDown() call at first parameter.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children('.dropdown-content')
.delay(1000) // set duration of delay in milliseconds here
.slideDown(200);
},
function() {
$(this).children('.dropdown-content')
.clearQueue()
.slideUp(0);
})
});
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align: center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link {
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover {
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
ul li .dropdown-content a:link {
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link {
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li> Home </li>
<li class="dropdown">
About
<div class="dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School&nbspLife
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</li> -->
</ul>

if you are trying delay after simple page load and without any other event call then pull out your slidedown statement from settimeout
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$('dropdown').children('.dropdown-content').slideDown(200);
}, 3000)
});
</script>
However if you want on hover then settimeout should be called on hover.
$(function(){
function hoverMe(){
$('dropdown').children('.dropdown-content').slideDown(200);
}
$(".dropdown").on('hover', function(){
setTimeout(hoverMe, 100);
})
})
Also jquery.ready function takes a function definition but you are calling setimeout there instead you should wrap your setimeout in a anonymous function

How to create a vertical navigation with hover dropdowns that also appear vertical?

I've reached a bit of a problem that I'm not sure how to work-around. I'm creating a vertical navigation for a website I'm working on, however all the vertical navigation menu's that I've seen display the hover drop-down menu to the right or left of the navigation. I'd like to have the drop-down menu appear under the link rather than to the side of the link.
For example: In my menu when a user hovers over or visits the "Treatments" I'd like the list "allergies & sinus, head & neck, etc" to appear below it rather than to the right.
I've tried to look around to see how I could go about doing this but haven't found any really good examples or help. I might need some javascript? I'm not sure, but if it's necessary I can add it I'm just not that familiar with javascript as I am with HTML and CSS.
My HTML:
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li><a herf="http://www.accentmd.com/florida-ent/allergy-sinus.html">Allergy & Sinus</a></li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul></li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>
My CSS:
.sidebar-nav {
height:auto;
list-style:none;
width: 100%;
}
.sidebar-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear:both;
width: 50%;
}
.sidebar-nav li a {
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:13px;
text-decoration:none;
}
.sidebar-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover ul {
display: block;
}
.sidebar-nav li:hover .sidebar-sub-menu {
position: relative;
margin-top: -27.5px;
}
.sidebar-sub-menu li {
position: relative;
display: block;
top: 0;
left:90%;
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
}
.sidebar-sub-menu li a {
display: inline-block;
padding: 0 10px;
}
.sidebar-nav li:active .sidebar-sub-menu {
position: relative;
margin-top:-27.5px;
}
Thanks in advance.

I reworked your CSS a bit to best isolate the desired behavior, maybe from here on you can keep tweaking the rest to your benefit. Note you've also had a typo on the allergy & sinus <a href=""> (says <a herf="">)
.sidebar-nav {
height: auto;
list-style: none;
width: 100%;
}
.sidebar-nav li {
/* height: 25px; */
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear: both;
width: 50%;
}
.sidebar-nav li a {
font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size: 13px;
text-decoration: none;
}
/* added CSS */
.sidebar-nav li {
list-style-type: none;
}
.sidebar-nav ul li a:hover {
background: lightgray;
}
.sidebar-nav ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover>ul {
display: block;
margin: 0;
padding: 0 10px;
}
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li>Allergy & Sinus</li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul>
</li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>

You could try something like this;
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
}
a:hover + div {
display: block;
}
</style>
</head>
<body>
<a>Hover me timberrrs!!</a>
<div>here is your stuff</div>
</body>
</html>

How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

I realize that this may not be possible, so I am also open to modifying the code for the sake of functionality.
Here is my css and html:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Raleway Webfont';
}
body {
margin: 0;
padding: 0;
height: 4000px;
font-size: 16px;
line-height: 1.5;
}
ul, li, h1, h2, p, a, .logo {
font-family: 'Raleway Webfont';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: black;
font-weight: 200;
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 100%;
padding-top: 0px;
background: #e5e5e5;
transition:.25s;
z-index: 100;
border-bottom-style: solid;
border-width: 1px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.9);
}
.inner {
width: 800px;
position: relative;
margin: 0 auto;
}
nav {
overflow: hidden;
}
nav ul {
float: right;
}
nav li {
display: inline;
float: left;
list-style: none;
}
nav a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 25px 15px;
transition:.25s;
}
nav a:hover {
margin: -8px 0 0 0;
}
nav ul li:first-child a {
background:#b7b7b7 !important;
}
nav ul li:nth-child(2) a {
background:#a0a0a0 !important;
}
nav ul li:nth-child(3) a {
background:#898989 !important;
}
nav ul li:nth-child(4) a {
background:#727272 !important;
}
nav ul li:nth-child(5) a {
background:#5b5b5b !important;
}
nav ul li:first-child:hover header {
background: #b7b7b7;
}
nav ul li:nth-child(2):hover header {
background: #a0a0a0;
}
nav ul li:nth-child(3):hover header {
background: #898989;
}
nav ul li:nth-child(4):hover header {
background: #727272;
}
nav ul li:nth-child(5):hover header {
background: #5b5b5b;
}
.logo {
float: left;
color: #000;
font-size: 30px;
font-weight: 300;
text-decoration: none;
line-height: 70px;
}
section .inner {
padding-top: 125px;
}
p {
padding-top: 25px;
font-weight: 400;
}
h1 {
text-align: center;
}
<header>
<div class="inner">
<div>
<a class="logo" href="Home.html">W </a>
</div>
<nav role='navigation'>
<ul>
<li>ME</li>
<li>CV</li>
<li>RD</li>
<li>AV</li>
<li>RR</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="inner">
<h1>about me</h1>
<p><span> A work in progress.</span>
</p>
</div>
</section>
I truly thought that I could get away with selecting a parent element by utilizing the :hover selector, but, obviously I was mistaken. I have already visited "Is there a CSS parent selector?", as well as most of the other queries referencing this issue. My specific need, however, still confuses me.
Essentially, is it possible to manipulate the background: of <header> utilizing the in-place -child arrangement, the :hover selector (what I want stylistically), and some method to extend that selector back up to the <header>? The :has() method seems to be a likely candidate, but I cannot figure out how to implement it here for the life of me. If any structure can/must be altered while maintaining the aesthetic, then I am certainly open to implementing it as well. Thank you in advance!

I don't know of a way using pure CSS, however if you want to change the <header> background based on which link in your navigation is hovered, you can use this in jQuery (be sure to run at load, or place at the end of your body just before </body>):
$('[role=navigation] a').hover(function(){
$(this).closest('header').css('background-color', $(this).css('background-color'));
},function(){
$(this).closest('header').css('background-color', '#e5e5e5');
});
https://jsfiddle.net/5d1tvnwh/

How do I get my tabs to go 100% across the top?

I'm trying to get my jQuery tabs to go all the way across the top and line up on the left and right side with the edges, I tried doing fixed widths but it doesn't seem to want to cooperate that way. Does anyone know how to do this? Also it keeps jumping around when you click on a tab, I saw it's because they are hiding the border of the content by moving the tab down over the border... is there anyway to connect the tabs to the content without moving the tab itself and creating that jumping?
http://jsfiddle.net/fun6faos/2/
<style>
.tabs-all {
width: 830px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.etabs {
margin: 0;
padding: 0;
width: 100%;
}
.tab-container .panel-container {
background: #fff;
border: solid #c2c2c2 1px;
padding: 10px;
}
.panel-container {
margin-bottom: 10px;
}
.tab1 {
width: 209px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab2 {
width: 233px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab3 {
width: 124px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab4 {
width: 207px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tab1.active, .tab2.active, .tab3.active, .tab4.active {
background: #fff;
padding-top: 6px;
position: relative;
top: 1px;
border-color: #c2c2c2;
border-top: 5px solid #70bf47;
border-right: solid 1px #c2c2c2;
border-left: solid 1px #c2c2c2;
}
.tab1 a, .tab2 a, .tab3 a, .tab4 a {
font-size: 15px;
line-height: 2em;
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
color: #464646;
font-weight: 600;
}
.tab1 a:hover, .tab2 a:hover, .tab3 a:hover, .tab4 a:hover {
text-decoration: none;
}
.tab1 a.active, .tab2 a.active, .tab3 a.active, .tab4 a.active {
text-decoration: none;
color: #464646;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
</head>
<body>
<div class="tabs-all">
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab1'>What is Community Solar?</li>
<li class='tab2'>Why Clean Energy Collective?</li>
<li class='tab3'>How it Works?</li>
<li class='tab4'>Community Solar Benefits</li>
</ul>
<div class='panel-container'>
<div id="tabs1">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs2">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs3">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs4">
<h2>TITLE</h2>
<p>Information</p>
</div>
</div>
</div>
</div>

You need to zero out the margins. Add this to your CSS:
body {
margin:0px;
}

Taking a cue from Bootstrap's tabs, we can apply table layout properties with CSS:
li.tab {display: table-cell; width: 1%;}
http://jsfiddle.net/isherwood/fun6faos/15
This example results in uniform tab widths. To have tabs sized somewhat proportionately to their text labels, remove the width property:
http://jsfiddle.net/isherwood/fun6faos/17
A note on your use of classes... A class, by definition, is a set of properties applied to multiple elements. When you're incrementing classes, you're using them wrongly. You should never have a list of elements in your CSS that have indexed numbers. I've stripped all such craziness out of your code.

CSS Help - Footer for Mobile Website

I am currently working on a mobile website and I could use some help with its footer.
Here is an image of how its supposed to look:
http://i.stack.imgur.com/alH8M.jpg
It should have the following:
1) the width needs to work on different mobile devices so it cant be fixed
2) the margin to the left of home and to the right of newsletter should be equal
3) if the devices width isnt big enough for the footer to be displayed in one line, the links should be displayed in multiple "lines". What im trying to say is, there should be no horizontal scrolling
Ive been fiddling around for ages now and cant get it to work. Heres some basic code to get started:
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
Thanks in advance to anyone who can help me!

nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }
ul with text alignment to the center and li displayed as inline block.
I think this should handle.

nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}

try this
nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }

I am not sure this will help you....
But i have done some works. you can resize the window it will display in multiple "lines.
here jsfiddle: http://jsfiddle.net/thilakar/XM2qU/1/

To your curren HTML structure, you can set some CSS to achieve a replica of the provided image:
See this working Fiddle Example!
HTML
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
CSS
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: blue;
text-align: center;
}
ul {
list-style-type: none;
padding: 12px 0;
width: auto;
margin: 0 auto;
display: block;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
a {
color: #FFF;
border-left: 1px solid #FFF;
text-decoration: none;
font-family: sans-serif;
padding: 0 8px;
font-size: 12px;
line-height: 17px;
}
li:first-child a {
border-left: 0 none;
}
a:hover {
text-decoration: underline;
}
Preview:
Some relevant links that can help you learn about what is being suggested:
CSS display Property
CSS Lists
CSS Padding
CSS Tutorial, Learning CSS