I am currently having issue in the Drop-Down Navigation menu created using HTML and CSS but later when i tried to apply padding between the list of a UL elements, I found that padding is different in all the elements for ex. The student box has 1px gap on all the sides (if you zoom in a little bit you will see it) and the rest of the list has more or less padding than the student one.
I attached the snippet for both the CSS and HTML code below:
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
padding: 1px;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
Help would be greatly appreciated.
Please add width: 100%; to dropdown menu li. Like:
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
padding: 1px;
}
nav ul li ul li {
width: 100%;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
remove padding from nav ul li ul and add width:100% for nav ul li ul li.
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
}
nav ul li ul li {
width:100%;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
Related
I have a navbar with a dropdown menu which works perfectly, but to show what is selected I want to make the background change on hover.
But when I try to do this it doesn't fit it looks like this:
And on the dropdown it looks like this:
And I want the background to fit with the navbar, but I don't know how.
nav {
width: 100%;
height: 60px;
background-color: gray;}
nav ul {
float: left;}
nav ul li {
float: left;
list-style: none;
position: relative;}
nav ul li a {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;}
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 60px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 0;}
/*top right bottom left*/
nav ul li ul li a:hover {
padding: 10px 10px 10px 10px;
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
I think this is your requirement.
No need of any taking -margin instead that make ul padding-left to zero and for hover background add padding to <a> tag.
nav {
width: 100%;
background-color: gray;}
nav ul {
float: left;
font-size: 0;
padding: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
background: gray;
}
nav ul li a {
margin-left: 0;
padding:15px 20px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 0;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 15px 20px;}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
there are many points you need to understand Like where to use float, negative margins and should not copy same code on hover state, I removed some of those and added some basic style and your navbar is good to go. you can also check this codepen link https://codepen.io/shahilparichay/pen/OJOJMpj
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: gray;
}
nav ul {
/* float: left; */
}
nav ul li {
/* float: left; */
list-style: none;
position: relative;
display: inline-block;
}
nav ul li a {
margin-left: 0px;
padding: 15px 10px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
color: white;
background-color: lightblue;
}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 15px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 10px 10px 10px 10px;
}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;
}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
You have to edit the padding values to set the background size on hover.
To change the background color to match the navbar when hovered in the category:
change this code:
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
to this:
nav ul li a:hover {
margin-left: -60px;
padding:16px;
margin-right: 10px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;
}
Blog about padding:
https://www.w3schools.com/css/css_padding.asp
I don't have time to trace your code, but you can use this code and make changes according to your need:
<!DOCTYPE html>
<html>
<head>
<title> Responsive Navigation Menus with Social Media</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function () {
$(".toggle-nav").click(function () {
$(".menu ul li").slideToggle("slow");
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: arial;
}
.menu {
width: 100%;
background: #333;
overflow: auto;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 70px;
}
.menu ul li {
float: left;
}
.menu ul li a {
text-decoration: none;
width: 100px;
display: block;
text-align: center;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.menu ul li a:hover {
background: #6666ff;
}
.menu ul li a.active {
background: orange;
}
.toggle-nav {
color: #fff;
text-decoration: none;
display: none;
}
.social {
float: right;
margin-right: 100px;
line-height: 70px;
}
.social a {
max-width: 50px;
text-align: center;
}
.social a i {
font-size: 20px;
background: #fff;
width: 40px;
height: 40px;
line-height: 40px;
color: #000;
border-radius: 50%;
margin: 5px;
}
.social a i:hover {
background: #6666ff;
color: #fff;
}
#media(max-width:800px) {
.toggle-nav {
font-size: 40px;
text-align: center;
font-weight: bold;
padding: 10px 0px 10px 0px;
background: #6666ff;
width: 100%;
display: block;
}
.menu ul li a {
width: 100%;
}
.menu ul li {
float: none;
width: 100%;
display: none;
;
}
.social {
width: 100%;
text-align: center;
border-top: 1px solid #fff;
float: none;
}
}
#media(min-width:850px) {
.menu ul li {
display: block !important;
}
}
</style>
</head>
<body>
<nav class="menu">
<a class="toggle-nav" href="#">☰</a>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>News</li>
<li>Blog</li>
<li>About</li>
<li>Privacy</li>
<li>Contact</li>
</ul>
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
</div>
</nav>
</body>
</html>
I would like to create a 2-level navigation with delay effect when hovering.
in css Where to put transition?
here is the snippet code:
#import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext');
body {
background: #ADAEAE;
box-sizing: border-box;
color: white;
font-family: 'Quicksand';
margin: 0;
}
nav {
background: #222122;
width: 100%;
text-align: center;
position: fixed;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul a {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
color: white;
text-decoration: none;
}
nav ul a:hover {
background-color: #404040;
transition: all 1s;
}
nav ul ul li {
display: block;
}
nav li ul {
display: none;
position: absolute;
background: #222122;
}
nav li:hover ul {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dokument bez tytułu</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav>
<ul>
<li>About
<ul>
<li>About2</li>
<li>About3</li>
<li>About4</li>
</ul>
</li>
<li>Offer
<ul>
<li>Offer2</li>
<li>Offer3</li>
<li>Offer4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
put z-index:1;background: #222122; on nav ul a{} to raise the link and hide the hidden menu below
in nav li ul{} remove display: none; and align the bottoms by bottom:0; and hide it under the a element with z-index:-1;
finally in nav li:hover ul{} have it move down with bottom:-300%; and add the animation here, you get a slide effect with transition: bottom .2s; and the ease-in makes it look like it hits something on the bottom
Note: bottom: -300% is because there are 3 items.
Note: transition is places under the :hover tag so that it disappears when you leave with your cursor, move it to nav li ul to make it slide back up
you can test in this snippet if that is indeed what you wanted.
#import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext');
body {
background: #ADAEAE;
box-sizing: border-box;
color: white;
font-family: 'Quicksand';
margin: 0;
}
nav {
background: #222122;
width: 100%;
text-align: center;
position: fixed;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul a {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
color: white;
text-decoration: none;
z-index:1;
background: #222122;
}
nav ul a:hover {
background-color: #404040;
transition: all 1s;
}
nav ul ul li {
display: block;
}
nav li ul {
bottom:0;
position: absolute;
background: #222122;
z-index:-1;
}
nav li:hover ul {
bottom: -300%;
display: block;
transition: bottom .2s ease-in;
}
<nav>
<ul>
<li>About
<ul>
<li>About2</li>
<li>About3</li>
<li>About4</li>
</ul>
</li>
<li>Offer
<ul>
<li>Offer2</li>
<li>Offer3</li>
<li>Offer4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
I am new to HTML and CSS.
I am trying to make a navigation bar with a drop down menu.
I created navbar. But the width of the main menu item is changing with the sub menu Item.
How can I stop changing the width of the main Menu Item.
here main menu item is "SCHOOLING".
I don't want to change the width of SCHOOLING.
Before change
After change
html code for NavBar
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav id="navbar" class="bold">
<ul>
<li style="border-top-left-radius:10px;border-bottom-left-radius:10px;">HOME</li>
<li><a href="subject.html" >SCHOOLING</a>
<ul>
<li>HIGH SCHOOL</li>
<li>HIGHER SECONDARY</li>
</ul>
</li>
<li>ENGINEERING</li>
<li>UG | PG</li>
<li>SPECIAL CLASSES</li>
<li>ABOUT</li>
<li style="border-right:none;">CONTACT US</li>
</ul>
</nav>
</body>
</html>
CSS code For the NavBar
* {
margin: 0;
padding: 0;
font-family: Courier New, monospace;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
.bold {
font-weight: bold;
}
/* NAV BAR */
#navbar {
background-color: #333;
margin:10px;
height: 40px;
color: white;
border-radius: 10px;
}
#navbar ul {
list-style: none;
overflow: hidden;
}
#navbar ul li {
float: left;
border-right: 2px solid #dede0e;
font-size: 1.5em;
}
#navbar ul li a {
color: white;
display: block;
text-decoration: none;
padding: 6px 10px;
}
#navbar ul li:hover {
background-color: #000000;
}
/* DROP DOWN MENU */
#navbar ul ul {
display: none;
list-style: none;
color: blueviolet;
background: #a80000;
}
#navbar ul ul li {
float: none;
font-size: 1em;
border: none;
position: relative;
top: 100%;
left: 0;
}
#navbar ul ul li a {
border-right: none;
padding: 0 20px;
}
#navbar ul li:hover > ul
{
display: block;
}
You can achieve this by setting the position of the dropdown menu to absolute.
#navbar ul ul {
display: none;
list-style: none;
color: blueviolet;
background: #a80000;
position: absolute;
}
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 !!