I'm trying to make the navigation bar for my personal site. I'm using flexbox because it's the only (pure CSS) solution I've found so far where the dropdown plays nicely with the link background color.
I'm trying to position the dropdown so that it floats over the content when opened. I tried setting the main nav li elements to have position: relative, then setting position: absolute and z-index: 1 for .dropdown ul , which technically works, but it breaks the grey background color for the link. I also tried using blocks, but it still looks bad either way. Does anyone know a pure CSS solution for this?
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: flex;
flex-direction: column;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
jsfiddle: http://jsfiddle.net/eq6o3yp5/8/
When you position it as absolute, the relative element do not get 'stretched' or resized, and so, that is why the background of the relative element do not reflect on the absolute positioned element.
Position it as absolute and give it a width, perhaps a min-width... and set a desired background-color or set it background-color: inherit;
.dropdown:hover ul, .dropdown ul:hover {
...
background-color: grey;
min-width: 100%;
position: absolute;
}
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: block;
position: absolute;
background-color: grey;
left: 0;
min-width: 100%;
position: absolute;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
Related
I am new to HTM/CSS and was trying to create a navigation bar on in header, using flex and when hover it should animate underline from bottom left to right.
But I am not able to get it to be placed in center and having spaces around each item.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
CSS code:
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
currently I am getting something like this:
| About Experience Works Hobbies |
enter image description here
I want output to be like: (having space around)
About Experience Works Hobbies
Thank you in advance!
To apply space-around you need to set display: flex; As you can see your a elements that make up the navbar are inside the ul, which in turn is inside the nav class. So what you have to do is set display: flex; to the direct relative of the elements you want to apply it to, in this case ul.
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav ul {
display: flex;
justify-content: space-around;
align-items:center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
I'm currently learning the basics of HTML and CSS and I wanna try to practice and to make some research when I get some troubles. Now I wanted to style the landing page just like in this screenshot I made but I didnt't found how to place the image under the navbar. I could use the power of photoshop and insert it in background but I think I can do in css that withouth making background basically an image. Don't judge me if I wrote something too wrong but I tried to think it before copy and paste from somewhere.
That's my entire code. I hope somebody can help me to place that image where I want. Thank you so much in advance and don't kill me please :)
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-color: var(--color-dark);
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--color-dark);
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<img src="images/landingpage_picture.jpg" alt="Landing Image" class="landing_image">
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
You can do this by turning the page into a flexbox/grid to ensure responsiveness, then adding a left shadow to the image (if you want the shadow)
You mean like this?? Just change your img its on the body.
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-image: url("https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg");
background-size:cover;
background-repeat:no-repeat;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
.landing_image {
display:flex;
justify-content:right;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
This question already has an answer here:
Why does percentage padding break my flex item?
(1 answer)
Closed 2 years ago.
I am developing a website and in the heading, there are quite a few list items. The problem is that I want the last list item to end where the parent div ends.
I want my the last item of this ul list "Emergency" to end with the end of the nav width. It is always overflowing.
Here is my code:
header {
width: 100%;
height: 15%;
background-color: #ab9a31;
}
div.container {
width: 75%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
top: -8px;
}
p {
white-space: nowrap;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
list-style-type: none;
display: flex;
border: rgba(255, 255, 255, 0.5) solid 2px;
}
nav ul li {
white-space: nowrap;
padding: 0 2%;
}
nav ul li a {
font-size: 0.9em;
color: black;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<meta name="viewport" content="width=device-width initial-width=1.0">
<link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<p>Find info for?</p>
<nav>
<ul>
<li>Apply</li>
<li>News</li>
<li>President</li>
<li>Shop</li>
<li>Visit</li>
<li>Give</li>
<li>Emergency</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How do I fit the entire list within the nav width?
Just use this code.
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
width: 100%;
height: 15%;
background-color: #ab9a31;
}
div.container {
width: 75%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
p {
white-space: nowrap;
width: auto;
}
nav {
display: flex;
width: auto;
}
nav ul {
list-style-type: none;
display: flex;
border: rgba(255, 255, 255, 0.5) solid 2px;
padding: 0;
box-sizing: border-box;
}
nav ul li {
display: table;
white-space: nowrap;
padding: 0 2%;
}
nav ul li a {
font-size: 0.9em;
color: black;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<meta name="viewport" content="width=device-width initial-width=1.0">
<link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<p>Find info for?</p>
<nav>
<ul>
<li>Apply</li>
<li>News</li>
<li>President</li>
<li>Shop</li>
<li>Visit</li>
<li>Give</li>
<li>Emergency</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
I am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>