My dropdown menu currently looks like this :
The Home is not quite at the correct position like how I would like it at the top left, how do I fix this? Many thanks for the help.
* {
margin: 0;
padding: 0;
}
nav {
width: 1600px;
}
ul {
list-style: none;
background-color: #333;
}
ul li {
width: 200px;
background: #333;
float: left;
height: 35px;
line-height: 35px;
text-align: center;
margin-right: 2px;
position: relative;
float: none;
display: inline-block;
}
ul li:hover {
background: #0e6ea8;
}
ul li a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
display: block;
border: none;
}
ul li ul li {
border-top: 1px solid #fff;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
ul li ul .first {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .first {
display: block;
}
ul li ul .second {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .second {
display: block;
}
ul li ul li ul .seconda {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul li ul:hover .seconda {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav>
<div class="nav navbar-fixed-top">
<ul>
<li>Home</li>
<li>Options<span> ▾</span>
<ul>
<li><a href="#">Consumer
Management <span>▶</span></a>
<ul class="first">
<li>www.e-homes.com.my</li>
</ul>
</li>
<li><a href="#">Project Admin
Tool <span>▶</span></a>
<ul class="second">
<li>Download</li>
<ul class="seconda">
<li>Download MR</li>
<li>Download PO</li>
<li>Download Invoice
</li>
<li>Download lalalala
</li>
</ul>
</ul>
</li>
</ul>
</div>
</nav>
I know its just a small thing I missed, would appreciate some guidance on this thank you so much again.
You have a missing ul and li before the second last closing element.
Add d-flex on the ul after navbar-fixed-top element <div class="nav navbar-fixed-top"> <ul class="d-flex">
* {
margin: 0;
padding: 0;
}
nav {
width: 1600px;
}
ul {
list-style: none;
background-color: #333;
}
ul li {
width: 200px;
background: #333;
float: left;
height: 35px;
line-height: 35px;
text-align: center;
margin-right: 2px;
position: relative;
float: none;
display: inline-block;
}
ul li:hover {
background: #0e6ea8;
}
ul li a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
display: block;
border: none;
}
ul li ul li {
border-top: 1px solid #fff;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
ul li ul .first {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .first {
display: block;
}
ul li ul .second {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .second {
display: block;
}
ul li ul li ul .seconda {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul li ul:hover .seconda {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav>
<div class="nav navbar-fixed-top">
<ul class="d-flex">
<li>Home</li>
<li>Options<span> ▾</span>
<ul>
<li><a href="#">Consumer
Management <span>▶</span></a>
<ul class="first">
<li>www.e-homes.com.my</li>
</ul>
</li>
<li><a href="#">Project Admin
Tool <span>▶</span></a>
<ul class="second">
<li>Download</li>
<ul class="seconda">
<li>Download MR</li>
<li>Download PO</li>
<li>Download Invoice
</li>
<li>Download lalalala
</li>
</ul>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Your HTML structure is incorrect (closing tags missing) and your CSS contains an error for ul li. Corrected below.
* {
margin: 0;
padding: 0;
}
nav {
width: 1600px;
}
ul {
list-style: none;
background-color: #333;
}
ul li {
width: 200px;
background: #333;
float: left;
height: 35px;
line-height: 35px;
text-align: center;
margin-right: 2px;
position: relative;
/* float: none; REMOVED */
display: inline-block;
}
ul li:hover {
background: #0e6ea8;
}
ul li a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
display: block;
border: none;
}
ul li ul li {
border-top: 1px solid #fff;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
ul li ul .first {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .first {
display: block;
}
ul li ul .second {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .second {
display: block;
}
ul li ul li ul .seconda {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul li ul:hover .seconda {
display: block;
}
<nav>
<div class="nav navbar-fixed-top">
<ul>
<li>Home</li>
<li>Options<span> ▾</span>
<ul>
<li><a href="#">Consumer
Management <span>▶</span></a>
<ul class="first">
<li>www.e-homes.com.my</li>
</ul>
</li>
<li><a href="#">Project Admin
Tool <span>▶</span></a>
<ul class="second">
<li>Download
<ul class="seconda">
<li>Download MR</li>
<li>Download PO</li>
<li>Download Invoice
</li>
<li>Download lalalala
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Related
I have 1 side menu in my main page of website. And some of the list have have sub menu. And on hover i want to display it. Firstly i am display it none and then on display it on hover but it is not displaying.
#menu {
width: 15%;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
position: absolute;
left:100%
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li>Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li>Salary</li>
<li>Change Password</li>
</ul>
</div>
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li class="submenu">Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
Also Add .submenu class to submenu dropdown parent li.
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
I have a menu, and I would like to have the last 3 options (some images for Facebook/Twiter/Gmail) to be aligned to the right. So far I tried:
li:last-child { float:right;}- combine the 3 images in one to have the last option to the right, but not even so works
float: right; - the same result as above
text-align: right; - no change
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 225px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li><li id="alignright">
FB
</li><li>
Twitter
</li><li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
Flexbox can do that:
JSfiddle Demo
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
height: 100px;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
}
#nav ul li {} #nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a {
color: white;
display: block;
padding: .5em;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#alignright {
margin-left: auto;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home
</li>
<li>
Study
</li>
<li>
Games
<ul>
<li>Riddles
</li>
<li>
Flip card game
</li>
<li>
Spot the mistake
</li>
<li>
Multiple choice
</li>
</ul>
</li>
<li>
Read
</li>
<li>
Contact
</li>
<li>
About Us
</li>
<li id="alignright">
FB
</li>
<li>
Twitter
</li>
<li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
First of all:
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
Any suggestions for this one?
I've added a background image of an arrow for any list item that has a drop down with the class of 'dropable' now because of this the list items are no longer evenly spaced to account for the added arrow, any suggestion on how to solve this as had no success so far.
CodePen: http://codepen.io/nickelse/pen/GJezQX?editors=110
HTML:
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
CSS:
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat 93% center;
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
Cheers
Nick
Instead of using images for caret, I would suggest using fonts from font-awesome.
This works pretty good
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav ul > li.dropable > a:after {
/* display:inline;
content: "\00a0\00a0\00a0\00a0";*/
/* background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;*/
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
I would take advantage of the :after pseudo class in CSS. The margins become evenly spaced and you forgo having to put the image into the navigation unnecessarily.
CodePen
nav ul > li.dropable > a:after {
display:inline;
content: "\00a0\00a0\00a0\00a0";
background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;
}
Figured it out, cheers anyway.
I did this:
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat right 20px center ;
padding-right: 34px;
}
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!