I am having some issues regarding a navigation bar using only HTML and CSS. I want to know how to get my navigation bar centered and how I can display my drop down content where it should (under services). Also, i want the hover over effect on "services" but I can't seem to make it work. Can anyone point out where my code went wrong? Below is my code.
/* Dropdown Button */
.dropbtn {
background-color: red;
color: red;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
/*CHECK*/
nav ul ul {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
ul ul a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*Show the dropdown menu on hover for services*/
.dropbtn:hover .dropdown_content {
display: block;
}
/* Change color of dropdown links on hover */
.dropdown_content a:hover {
background-color: #ddd;
}
<nav style="height: 60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<ul class="dropdown_content">
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<li>CONTACT</li>
<ul>
<li>BOOK</li>
</ul>
</ul>
</nav>
I made a few changes to the code. Explanations are in comments.
nav ul {
/* Remove list bullets from menu */
list-style-type: none;
}
/* Dropdown Button */
.dropbtn {
background-color: red;
/* cosmetic: you won't see red text on red background :) */
/*color: red;*/
padding: 16px;
font-size: 16px;
border: none;
}
/* The container needed to position the dropdown content */
/* This isn't used, so we don't need it */
/*.dropdown {
position: relative;
display: inline-block;
}*/
/* Dropdown Content (Hidden by Default) */
/*CHECK*/
nav ul ul {
display: none;
position: absolute;
/* move it down to avoid overlapping the button */
margin-top: 16px;
/* align it to the button */
margin-left: -40px;
min-width: 160px;
z-index: 1;
}
/* float the main items (and only those) to create a horizontal bar */
nav>ul>li {
float: left;
margin: 5px;
}
/* Links inside the dropdown */
ul ul a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*Show the dropdown menu on hover for services*/
/* + combinator selects adjacent siblings, in this case the dropdown */
.dropbtn:hover+.dropdown_content,
.dropdown_content:hover {
display: block;
}
/* Change color of dropdown links on hover */
.dropdown_content a:hover {
background-color: #ddd;
}
<nav style="height: 60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<li>
SERVICES
<ul class="dropdown_content">
<!-- Put the dropdown items into one <li> with the dropbtn, makes hover effect easier -->
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<li>CONTACT</li>
<ul>
<li>BOOK</li>
</ul>
</ul>
</nav>
maybe below code will help you as what you want i made some changes of your code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: red;
/* cosmetic: you won't see red text on red background :) */
/*color: red;*/
font-size: 16px;
border: none;
}
/*Show the dropdown menu on hover for services*/
.dropdown_content {
color: black;
padding: 12px 16px;
text-decoration: none;
display: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown_content > li:hover {background-color: #ddd;}
.dropdown:hover .dropdown_content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<nav style="height: 60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<div class="dropdown">
<li>SERVICES</li>
<ul class="dropdown_content">
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
</div>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<li>CONTACT</li>
<ul>
<li>BOOK</li>
</ul>
</ul>
</nav>
</body>
</html>
i just added this four line of code in style
.dropdown_content > li:hover {background-color: #ddd;}
.dropdown:hover .dropdown_content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.dropdown_content {
color: black;
padding: 12px 16px;
text-decoration: none;
display: none;
}
and added <div class="dropdown"> element for dropdown
This is another possible help:
Sample in horizontally aligned
Shows when placing on top of Book or Service
Contains an extra line drawer
/*Style for when the container class is displayed*/
.dropdown_content {
display: none;
padding: 5px;
position: absolute;
width: 200px;
text-align: center;
}
/*Style in charge that when we put the mouse on top of him, we show him the hidden*/
/*Show the Service list*/
#dropbtnService:hover .dropdown_content {
display: block;
}
/*Show the Book list*/
#dropbtnBook:hover .dropdown_content {
display: block;
}
/* Change color of dropdown links on hover */
.dropdown_content a:hover {
background-color: #ddd;
}
/*The other code has been deleted due to the number of errors that occurred*/
* {
margin: 0;
padding: 0;
}
#main {
margin: auto;
width: 900px;
height: 100px;
border: 1px solid #444;
text-align: center
}
div > ul {
padding: 20px;
}
div > li {
list-style: none;
display: inline;
margin: 0 20px 0 20px;
}
nav > ul > li, div {
float: left;
padding: 1em;
}
/* Links inside the dropdown */
ul ul a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
nav ul {
/* Remove list bullets from menu */
list-style-type: none;
}
#dropbtnService {
background-color: red;
padding: 16px;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="main">
<nav style="height:60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<!--Modify and agree div's-->
<div id="dropbtnService">
<li>SERVICES</li>
<div class="dropdown_content">
<ul>
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
</div>
</div>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<div id="dropbtnBook">
<li>CONTACT</li>
<div class="dropdown_content">
<ul>
<li>BOOK</li>
</ul>
</div>
</div>
</ul>
</nav>
</div>
</body>
</html>
Related
Please don't be rude, im new on here and dont know much about this site, if you do answer my issue, it would help if you leave a "explanation" of what you changed, added, etc. and what it would do
I want to have a menu that has a dropdown, but inside the dropdown will be another dropdown menu [Image of what I'm talking about, (red being the area of the dropdown menu that's inside the other dropdown menu)]
codes given below first is style.css, second is index.html
body
{
font-family: sans-serif;
background: #FFB6C1;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li
{
float: left;
}
li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn
{
background: #ffaebd;
}
li.dropdown
{
display: inline-block;
}
li.dropdown a, .dropbtn
{
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background: #201e2a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown a:hover
{
background: #ffaebd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
/* next */
body
{
font-family: sans-serif;
background: #FFB6C1;
}
/* FFA07A */
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li
{
float: left;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<label class="logo">Test Page</label>
<li>Home</li>
<li class="dropdown">
Dropdown Menu
<div class="dropdown-content">
Link One
Link Two
Sub Dropdown
<!-- (set to this instead of a dropdown just for showcase/ss reasons) -->
</div>
</li>
</ul>
</body>
</html>
You can do it by putting your exact code of dropdown inside your sub dropdown
<li class="dropdown">
<a id="drpbtn" class="dropbtn">Dropdown Menu</a>
<div aria-label="drpbtn" class="dropdown-content">
Link One
Link Two
Sub dropdown btn
<div aria-label="drpbtn2" class="sub-dropdown-content">
Link One
Link Two
</div>
</div>
</li>
here is an example of how you can do this and I try to keep it as simple as possible to understand how it works :
ul {
margin: 0;
padding: 0;
display: none;
}
.menu {
display: block;
}
li {
padding: 16px;
}
li:hover > ul {
display: block;
}
<ul class="menu">
<li>
Hover me !
<ul>
<li>Menu Item</li>
<li>
Menu Item
<ul>
<li>Menu Item</li>
<li>
Menu Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
codesandbox: https://codesandbox.io/s/vibrant-grass-1byw0b
I'm pretty new to HTML/CSS and I have no formal training, just kind of Frankenstein-ing stuff together. Right now I have a dropdown menu at the end of a main navigation menu. The problem is the links inside of the dropdown menu- I need them to be a darker color but they won't change from the light color from the main navigation menu. No matter what I try, the color is always the same! For some reason I can even change the color of the bullet points on the list (which I need to get rid of, too, but that's easier), but the text remains the same.
Appreciative of any help whatsoever. :-)
/* (1/3) MAIN NAVIGATION BAR */
#navbar {
overflow: hidden;
background-color: #999900;
font-family: caviar-dreams;
}
/* (2/3) NAVIGATION LINKS */
#navbar a {
float: left;
color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
padding-left: 15px;
text-transform: uppercase;
text-decoration: none;
}
/* (3/3) NAVIGATION LINKS */
#navbar a:hover {
text-decoration-line: underline;
text-decoration-style: solid;
}
/* (1/7) DROPDOWN MENU CONTAINER */
.dropdown {
overflow: hidden;
}
/* (2/7) DROPDOWN MENU BUTTON */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding-top: 5px;
vertical-align: middle;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
/* (3/7) DROPDOWN BUTTON HOVER COLOR */
.dropdown:hover .dropbtn {
background-color: #8d7b8a;
}
/* (4/7) DROPDOWN CONTENT (HIDDEN UNTIL HOVERED) */
.dropdown-content {
display: none;
position: absolute;
background-color: #FFFFFF;
border: 1px dashed #b89abe;
width: auto;
}
/* (5/7) DROPDOWN LINKS */
.dropdown-content a {
float: none;
color: black;
background-color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* (6/7) DROPDOWN LINKS HOVER */
.dropdown-content a:hover {
background-color: #8d7b8a;
}
/* (7/7) SHOW DROPDOWN MENU ON HOVER */
.dropdown:hover .dropdown-content {
display: block;
}
/* AT LEAST THIS DID /SOMETHING/ ?
.dropdown-content ul li a
{color:green;
background-color: blue;
list-style-type: none;
} */
<!DOCTYPE html>
<div class="wrapper">
<link href="style.css" rel="stylesheet" type="text/css">
<!--| NAVIGATION BAR (1/2) |-->
<div id="navbar">
Home
About
News
Contact
<!--| DROPDOWN MENU IN NAV BAR (2/2) |-->
<div class="dropdown">
<button class="dropbtn">Drop Down Menu</button>
<div class="dropdown-content">
<ul>
<li>Art Education</li>
<li>Graphic Design</li>
<li>Custom Projects</li>
<li>Events and Parties</li>
<li>Studio Work</li>
<li>Photo Gallery</li>
<li>CV</li>
<li>Shop</li>
</ul>
</div>
</div>
</div>
</div>
The problem is that ids are higher in the css hierarchy than classes. So #navbar a will always overwrite .dropdown-content a.
You can try this:#navbar .dropdown-content a.
Or you can rewrite as #navbar > a. This will only target anchor tags that are immediate children of the navbar. So it should ignore the anchor tags in your dropdown.
Or better yet, just don't use the id. There's not a whole lot of benefit to using an id over a class, and it tends to lead to these sorts of hiearchy issues.
This should work for you. All you needed was a more specific selector to override the ids.
/* (1/3) MAIN NAVIGATION BAR */
#navbar {
overflow: hidden;
background-color: #999900;
font-family: caviar-dreams;
}
/* (2/3) NAVIGATION LINKS */
#navbar a {
float: left;
color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
padding-left: 15px;
text-transform: uppercase;
text-decoration: none;
}
/* (3/3) NAVIGATION LINKS */
#navbar a:hover {
text-decoration-line: underline;
text-decoration-style: solid;
}
/* (1/7) DROPDOWN MENU CONTAINER */
.dropdown {
overflow: hidden;
}
/* (2/7) DROPDOWN MENU BUTTON */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding-top: 5px;
vertical-align: middle;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
/* (3/7) DROPDOWN BUTTON HOVER COLOR */
.dropdown:hover .dropbtn {
background-color: #8d7b8a;
}
/* (4/7) DROPDOWN CONTENT (HIDDEN UNTIL HOVERED) */
.dropdown-content {
display: none;
position: absolute;
background-color: #FFFFFF;
border: 1px dashed #b89abe;
width: auto;
}
/* (5/7) DROPDOWN LINKS */
#navbar .dropdown-content a {
float: none;
color: black;
background-color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* (6/7) DROPDOWN LINKS HOVER */
#navbar .dropdown-content a:hover {
background-color: #8d7b8a;
}
/* (7/7) SHOW DROPDOWN MENU ON HOVER */
.dropdown:hover .dropdown-content {
display: block;
}
/* AT LEAST THIS DID /SOMETHING/ ?
.dropdown-content ul li a
{color:green;
background-color: blue;
list-style-type: none;
} */
<!DOCTYPE html>
<div class="wrapper">
<link href="style.css" rel="stylesheet" type="text/css">
<!--| NAVIGATION BAR (1/2) |-->
<div id="navbar">
Home
About
News
Contact
<!--| DROPDOWN MENU IN NAV BAR (2/2) |-->
<div class="dropdown">
<button class="dropbtn">Drop Down Menu</button>
<div class="dropdown-content">
<ul>
<li>Art Education</li>
<li>Graphic Design</li>
<li>Custom Projects</li>
<li>Events and Parties</li>
<li>Studio Work</li>
<li>Photo Gallery</li>
<li>CV</li>
<li>Shop</li>
</ul>
</div>
</div>
</div>
</div>
When I hover over the text of navigation bar, the space above text highlights instead of the text itself. my CSS code is as below:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
My html code is as below:
<ul>
<li> Home</li>
<li>Contact</li>
<li> Gallery</li>
</ul>
First look at your anchor links, you made a mistake in them, place a link text between . Second apply hover rule over li instead of li a:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li:hover {
background-color: #555;
color: white;
}
<ul>
<li>
Home</li>
<li>
Contact</li>
<li>
Gallery</li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home </li>
<li>Contact</li>
<li> Gallery</li>
</ul>
add text with in a tag, to make the link clickable - and to get your desired result also
I have checked your code and find that the problem is in your html code. try this one.
<ul>
<li>Home</li>
<li>Contact</li>
<li> Gallery</li>
</ul>
the text should be inside <a> tag as you are hovering the <a> element.
Just change li a:hover to li:hover
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li:hover {
background-color: #555;
color: white;
}
<ul>
<li> Home</li>
<li>Contact</li>
<li> Gallery</li>
</ul>
I have went through W3Schools to attempt understanding the coding structure of dropdown menus. When opening the page and hovering your cursor to the 'Merch' text it is supposed to display the dropdown menu. For some reason, however, it is not showing. Please amplify for me and show me where I went wrong.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown {
position: absolute;
display: none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Merch
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
You need this change in CSS
#dropbtn:hover + #dropdown {
display: block;
}
Dropdown is not a child, it is next element in your current html setup, so, this selector will find it.
Or, better, place id on li element (parent):
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
#dropbtn:hover #dropdown {
display: block;
}
Demo: https://jsfiddle.net/3bfgzf37/
If you use first solution, dropdown dissapears fast, and behave strange...
Explanation: hover on a is not hover on dropdown (a is sibling), hover on li element, is, in the same time, hover on dropdown (parent-child, dropdown is 'inside' li - that produces consistent, desired, behavior).
Second one is better.
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown{
position: absolute;
display:none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Your style tag should be outside the head tag. Plus, the dropdown in this code works now. Just do some slight changes to the colors to your desire. :)
<html>
<head></head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: gray;
}
</style>
<body>
<ul>
<li>Home</li>
<li>
<div class="dropdown">
<button class="dropbtn">Merch</button>
<div class="dropdown-content">
Shirts
Pants
</div>
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
I've got the problem that on my small test website I can't get the navigation bar centered.
I want to have all the buttons on it centered while the navigation bar goes from the right to the left side of the website. I've got no fixed width and don't want to have one. The solution should also work with smartphones and tablets and just to mention: I don't really care about IE support.
I already searched a bit through the web but got nothing I've tried working.
Here is the code I've already got:
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
And here is the CSS code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li { float: left; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
I'm using HTML5 with CSS3.
EDIT: It seems to be that I wasn't clear enough with the buttons. The buttons should not be as large as the navigation bar itself. All buttons should be centered on the navigation bar, so in the middle there are the buttons and on the left and right side there is just the black navigation bar without buttons if there is enough space left, ofcourse.
Using flexbox will do exactly that...
adding flex-flow: row wrap; will allow the menu to wrap on smaller screens if the navigation is larger than the viewport.
You will need to prefix those styles to run on all browsers FYI.
.navigation nav {
display: flex;
justify-content: center;
background-color: #333333;
}
ul {
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover {
background-color: #111111
}
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Download
</li>
<li>Contact
</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
Solution just with two lines of css:
1. ul{ text-align: center;}
2. li{display: inline-block;}
That's all :)
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
text-align: center;
}
li { display: inline-block; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
</style>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>
The simpliest solution I think will be if will just divide 100% by number of li items in menu, so in this case we have 3 li elements so about 33% of width:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li {
float: left;
width: 33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
<html>
<head>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>