I am creating a submenu which shows on hover of the parent menu. But when I try to go to submenu after hoving on the parent, it immediately disappears. I know there should not be any gap between parent and child menu to make the navigation seamless, but not able to figure out in the below code. I know this could be a trivial issue, any help would be appreciated.
body {
margin: 0;
}
a {
color:white;
width:55px;
}
header {
background-color: rgba(0,0,0,0.5);
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul.parent {
display: flex;
list-style: none;
margin: 0;
padding: 0
}
a {
display: block;
text-decoration: none;
padding: 10px 30px;
margin: 0 60px;
background-color: black
}
.child {
display: none;
position: absolute;
top: 38px;
left: 30px;
}
a:hover ~ .child {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<ul class="parent">
<li >
<a class="test" href="#">Home<i class="fa fa-caret-down"></i></a>
<div class="child">
<ul >
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</div>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</header>
</body>
</html>
Just change the code:
a:hover ~ .child {
display: block;
}
to:
li:hover .child {
display: block;
}
Suggestion:
Please update your code like this, otherwise, if you trying to add another child for a menu it will not work.
.child {
display: none;
position: absolute;
top: 100%;
left: 30px;
}
ul.parent li {
position: relative;
}
ul.parent li:hover .child {
display: block;
}
I hope you understood the thing.
Check this fiddle: https://jsfiddle.net/15h6jyg4/
Add a class to the list with submenu and add hover to that class
body {
margin: 0;
}
a {
color:white;
width:55px;
}
header {
background-color: rgba(0,0,0,0.5);
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul.parent {
display: flex;
list-style: none;
margin: 0;
padding: 0
}
a {
display: block;
text-decoration: none;
padding: 10px 30px;
background-color: black
}
.parent li{
margin-left:60px;
}
.child {
display: none;
position: absolute;
top: 38px;
left: 30px;
}
.hasSub:hover .child {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<ul class="parent">
<li class="hasSub">
<a class="test" href="#">Home<i class="fa fa-caret-down"></i></a>
<div class="child">
<ul >
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</div>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</header>
</body>
</html>
Related
Im trying to make a navbar but I am having trouble with the a:hover. only the content box changes color, but I want it to be the content box and the padded area around it. What is happening?
I have tried everything, but for some reason only the content box changes, which looks awful. I am trying to get a full box to change color. I feel like an idiot, can someone look through this and tell me what I am doing wrong?
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
padding: 20px 20px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360)679-4444</li>
</ul>
</nav>
I've moved the padding from li to a
See working code:
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
padding: 20px;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360)679-4444</li>
</ul>
</nav>
I currently have a heading 1 and logo on the same line of the header, and now I want to have a background colour for the header. I would ideally want this to come down below the nav bar as well.
The issue I'm having is that the colour doesnt fill the top part of the page as I thought it would. It only covers the heading and it also covers the logo on the same line.
How would I stop the colour from going over the image and how would I make the colour spread from the top of the page to below the nav bar.
HTML:
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
EDIT: This is what I mean about the background colour covering the logo:
I swapped the HTML header tag to be within the body. Your body tag is where it will house all your html minus the head tag that has your title. Not a big deal since it renders fine, just a best practice. I also changed the css for your header img to have a z-index which places the image on top of the h1 tag and your h1 tag to have a z-index of -100 to always fall to the back.
Hope this helps.
.header img {
float: left;
background: #555;
z-index: 100; /* added */
width: 100px; /* added */
}
.header h1 {
z-index: -1; /* added */
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
<header>
<div class="header">
<img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg"
alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
</body>
</html>
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header style=" background-color:#D3D3D3;">
<div class="header" >
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
Is this what you are expecting ?
you are seeing gap between header and navbar -- this is beacause the h1 inside the header had default margin, remove that, give padding instead. Also remover brs after header.
Change your .header h1 css to
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
What do you mean by stop the colour from going over the image ?
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
.headerContainer {
background-color:#D3D3D3;
padding-bottom: 10px;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="headerContainer">
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</div>
</header>
<body>
</body>
</html>
I need some help. I am working on this navigation bra that has a list of menu in it, and one of them is Award. Award has submenu that is hidden, and if I hover it, it submenu should be visible to the user. However, when I hover over the Award, it submenu not being visible to the user. I don't what I am doing wrong. I was hopping that someone could help me here, Please.
Here is my code
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li ul:hover
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You're targeting .sidebar li ul:hover to show the hidden ul. That won't work because the ul you want to hover is hidden - you can't hover the element if it's hidden. Instead, you need to target .sidebar li:hover > ul which means that when you hover a li it will show any direct child ul's
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li:hover > ul
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You can even solve this without JavaScript:
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
#awards ul{
display:none;
}
#awards:hover ul{
display:block;
}
Wrestling with mutli-drop menu. (97% working) Select United States 1 menu, then pick Nevada menu item. There's a gray bar at the bottom. Same for US -> California. Gray bar below Los Angeles. I've played with margins and padding for a while. The :hover I was hoping would highlight the entire li portion. "Seems" to for all but most bottom menu item. (BTW: US -> California -> San Francisco -> SOMA. You'll see top left corner doesn't quite touch. That's maybe related.)
Any tips welcome. Thanks. Milton.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul
{
list-style:none;
margin: 0;
padding: 0;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul li
{
display: inline-block;
position:relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a
{
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration:none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul
{
display:none;
position:absolute;
top: 100%; /* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a
{
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left:100%;
}
p.menutextpadder { padding-left: 12px; padding-top: 4px; padding-bottom: 4px; }
#nav_wrapper ul li:hover > ul { display:block; }
#nav_wrapper ul li:hover { background-color: Blue; color: white; }
</style>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li><p class="menutextpadder">United States 1
<ul>
<li class="dir"><p class="menutextpadder">Arizona</p></li>
<li class="dir"><p class="menutextpadder">California
<ul>
<li><p class="menutextpadder">San Francisco
<ul>
<li><p class="menutextpadder">Pacific Heights</p></li>
<li><p class="menutextpadder">SOMA
<ul>
<li class="dir"><p class="menutextpadder">Spear Street</p></li>
<li class="dir"><p class="menutextpadder">Moscone Center</li>
</ul>
</li>
</ul>
</li>
<li><p class="menutextpadder">Los Angeles</p></li>
</ul>
<li class="dir"><p class="menutextpadder">Nevada</p></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
add the css rule below
ul{
font-size: 0;
}
Snippet below
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul {
list-style: none;
margin: 0;
padding: 0;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a {
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration: none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul {
display: none;
position: absolute;
top: 100%;
/* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a {
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left: 100%;
}
p.menutextpadder {
padding-left: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
#nav_wrapper ul li:hover > ul {
display: block;
}
#nav_wrapper ul li:hover {
background-color: Blue;
color: white;
}
#nav_wrapper .menutextpadder {} ul {
font-size: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li>
<a href="#">
<p class="menutextpadder">United States 1</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Arizona</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">California</p>
</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">San Francisco</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">Pacific Heights</p>
</a>
</li>
<li>
<a href="#">
<p class="menutextpadder">SOMA</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Spear Street</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">Moscone Center</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<p class="menutextpadder">Los Angeles</p>
</a>
</li>
</ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Nevada</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I want to remove the extra border after the "what's new" and the "meal ideas", I tried selecting the first child in the <ul> instead of the <li> and it didn't even work.
html {
background-color: white ;
}
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
}
header li :first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
<!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
Use this:
.Left ul li:last-child a,.Right ul li:last-child a {
border: none;
}
html {
background-color: white ;
}
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
}
header li :first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
.Left ul li:last-child a,.Right ul li:last-child a {
border: none;
}
<!DOCTYPE <!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
Here you go:
CSS:
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 5px;
margin: 5px;
font-size: 16px;
}
ul li:first-child {
border-right: 1px solid #373535;
padding-right: 10px;
width: 9%;
}