I have been working on creating an HTML/CSS menu. I have the layout and everything looking great, the only thing is that the submenus disappear every time I move off the parent. I have looked around at the various reasons why this can happen, the most common one seems to be some element is getting focus when the mouse moves, however I have been over my code from top to bottom and can't find where this might be happening. Any tips and/or coding errors please let me know.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="site.css" rel="stylesheet" />
<title>My Test Site</title>
<script src="jquery/jquery-1.12.1.min.js"></script>
<script src="jquery/slider.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="menu_strip">
<ul id="menu">
<li>Home</li>
<li>
About
<ul class="hidden_menu">
<li>What We Do</li>
</ul>
</li>
<li>Contact</li>
<li>
Resources
<ul class="hidden_menu">
<li>Bit & Pieces</li>
<li>Reference Documents</li>
</ul>
</li>
<li>Login</li>
</ul>
</div>
<div id="header_wrapper">
<img id="top_logo" src="images/ed_small.png"/>
<h1>My Test Site</h1>
</div>
</header>
<div id="banner">
<div class="slider">
<ul>
<li>
<img src="images/banner1.png" />
</li>
<li>
<img src="images/banner2.png" />
</li>
<li>
<img src="images/banner3.png" />
</li>
</ul>
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
<div id="content">
<p>Content goes here</p>
<div id="footer">
<h3>This is the footer</h3>
</div>
</div>
</div>
</body>
</html>
Relevant CSS
#font-face {
font-family: continuum;
src: url("/fonts/continuum/contm.ttf");
}
body, div, h1, h2, h3, p, header{
margin: 0; padding: 0; border: 0;
}
body {
text-align: center;
}
header {
position: fixed;
z-index: 500;
height: 100px;
background: #FFFFFF;
#background: #008C9E;
#background: #44749D;
width: 100%;
align-content: center;
}
#menu_strip {
position: fixed;
z-index: 58;
height:30px;
width: 100%;
#background: #000000;
background: #343838;
}
#menu_strip ul {
position: absolute;
font-family: continuum;
color: #ffffff;
list-style-type:none;
margin:0;
padding:0;
}
#menu {
right:0;
z-index: 501;
}
#menu_strip li {
display:inline-block;
float: left;
margin-right: 1px;
}
#menu_strip li a {
display:block;
min-width:100px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: continuum;
color: #fff;
background: #343838;
text-decoration: none;
}
#menu_strip li:hover a {
background: #f5f1e9;
color: #343838;
}
#menu_strip li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 30px;
line-height: 30px;
}
#menu_strip li:hover ul a:hover {
background: #19c589;
color: #fff;
}
#menu_strip li ul {
display: none;
}
#menu_strip li ul li {
display:block;
float: none;
}
#menu_strip li ul li a {
width:auto;
min-width: 155px;
padding: 0 20px;
}
#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
z-index: 503;
display: block;
}
#header_wrapper {
#position: fixed;
position: relative;
margin-top: 31px;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header h1 {
position: relative;
font-family: continuum;
margin-top: -56px;
margin-left: -500px;
}
#top_logo {
position: relative;
margin-top: 4px;
height: 60px;
margin-left: -900px;
}
#banner {
position: fixed;
width: 100%;
height: 300px;
top: 100px;
#background: #00B4CC;
#background: #CCEBF1;
background: #f5f1e9;
}
Thanks all for your time.
Change this line
#menu_strip ul li a:hover + .hidden_menu
to
#menu_strip ul li:hover .hidden_menu
#font-face {
font-family: continuum;
src: url("/fonts/continuum/contm.ttf");
}
body,
div,
h1,
h2,
h3,
p,
header {
margin: 0;
padding: 0;
border: 0;
}
body {
text-align: center;
}
header {
position: fixed;
z-index: 500;
height: 100px;
background: #FFFFFF;
#background: #008C9E;
#background: #44749D;
width: 100%;
align-content: center;
}
#menu_strip {
position: fixed;
z-index: 58;
height: 30px;
width: 100%;
#background: #000000;
background: #343838;
}
#menu_strip ul {
position: absolute;
font-family: continuum;
color: #ffffff;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu {
right: 0;
z-index: 501;
}
#menu_strip li {
display: inline-block;
float: left;
margin-right: 1px;
}
#menu_strip li a {
display: block;
min-width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: continuum;
color: #fff;
background: #343838;
text-decoration: none;
}
#menu_strip li:hover a {
background: #f5f1e9;
color: #343838;
}
#menu_strip li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 30px;
line-height: 30px;
}
#menu_strip li:hover ul a:hover {
background: #19c589;
color: #fff;
}
#menu_strip li ul {
display: none;
}
#menu_strip li ul li {
display: block;
float: none;
}
#menu_strip li ul li a {
width: auto;
min-width: 155px;
padding: 0 20px;
}
#menu_strip ul li:hover .hidden_menu,
.hidden_menu:hover {
z-index: 503;
display: block;
}
#header_wrapper {
#position: fixed;
position: relative;
margin-top: 31px;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header h1 {
position: relative;
font-family: continuum;
margin-top: -56px;
margin-left: -500px;
}
#top_logo {
position: relative;
margin-top: 4px;
height: 60px;
margin-left: -900px;
}
#banner {
position: fixed;
width: 100%;
height: 300px;
top: 100px;
#background: #00B4CC;
#background: #CCEBF1;
background: #f5f1e9;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="site.css" rel="stylesheet" />
<title>My Test Site</title>
<script src="jquery/jquery-1.12.1.min.js"></script>
<script src="jquery/slider.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="menu_strip">
<ul id="menu">
<li>Home
</li>
<li>
About
<ul class="hidden_menu">
<li>What We Do
</li>
</ul>
</li>
<li>Contact
</li>
<li>
Resources
<ul class="hidden_menu">
<li>Bit & Pieces
</li>
<li>Reference Documents
</li>
</ul>
</li>
<li>Login
</li>
</ul>
</div>
<div id="header_wrapper">
<img id="top_logo" src="images/ed_small.png" />
<h1>My Test Site</h1>
</div>
</header>
<div id="banner">
<div class="slider">
<ul>
<li>
<img src="images/banner1.png" />
</li>
<li>
<img src="images/banner2.png" />
</li>
<li>
<img src="images/banner3.png" />
</li>
</ul>
<button class="prev">
<</button>
<button class="next">></button>
</div>
</div>
<div id="content">
<p>Content goes here</p>
<div id="footer">
<h3>This is the footer</h3>
</div>
</div>
</div>
</body>
</html>
Add !important like this,
#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
z-index: 503;
display: block !important;
}
not sure, if i understood your desired color schema. I dared to little alter your aproach
#font-face {
font-family: continuum;
src: url("/fonts/continuum/contm.ttf");
}
body, div, h1, h2, h3, p, header{
margin: 0; padding: 0; border: 0;
}
body {
text-align: center;
}
header {
position: fixed;
z-index: 500;
height: 100px;
background: #FFFFFF;
#background: #008C9E;
#background: #44749D;
width: 100%;
align-content: center;
}
#menu_strip {
position: fixed;
z-index: 58;
height:30px;
width: 100%;
#background: #000000;
background: #343838;
}
#menu_strip ul {
position: absolute;
font-family: continuum;
color: #ffffff;
list-style-type:none;
margin:0;
padding:0;
}
#menu {
right:0;
z-index: 501;
}
#menu_strip li {
display:inline-block;
float: left;
margin-right: 1px;
}
#menu_strip li a {
display:block;
min-width:100px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: continuum;
color: #fff;
background: #343838;
text-decoration: none;
}
#menu_strip li:hover a {
background: #f5f1e9;
color: #343838;
}
#menu_strip li ul li:hover a {
background: #343838;
color: #f5f1e9;
}
#menu_strip li ul {
display: none;
}
#menu_strip li:hover ul {
display: block;
}
#menu_strip li ul li {
display:block;
float: none;
}
#menu_strip li ul li a {
width:auto;
min-width: 155px;
padding: 0 20px;
}
#header_wrapper {
#position: fixed;
position: relative;
margin-top: 31px;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header h1 {
position: relative;
font-family: continuum;
margin-top: -56px;
margin-left: -500px;
}
#top_logo {
position: relative;
margin-top: 4px;
height: 60px;
margin-left: -900px;
}
#banner {
position: fixed;
width: 100%;
height: 300px;
top: 100px;
#background: #00B4CC;
#background: #CCEBF1;
background: #f5f1e9;
}
<div id="container">
<header>
<div id="menu_strip">
<ul id="menu">
<li>Home</li>
<li>
About
<ul class="hidden_menu">
<li>What We Do</li>
</ul>
</li>
<li>Contact</li>
<li>
Resources
<ul class="hidden_menu">
<li>Bit & Pieces</li>
<li>Reference Documents</li>
</ul>
</li>
<li>Login</li>
</ul>
</div>
<div id="header_wrapper">
<img id="top_logo" src="images/ed_small.png"/>
<h1>My Test Site</h1>
</div>
</header>
<div id="banner">
<div class="slider">
<ul>
<li>
<img src="images/banner1.png" />
</li>
<li>
<img src="images/banner2.png" />
</li>
<li>
<img src="images/banner3.png" />
</li>
</ul>
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
<div id="content">
<p>Content goes here</p>
<div id="footer">
<h3>This is the footer</h3>
</div>
</div>
</div>
Related
How can i center the float element that you can see in this photo? I want to bring it from the left of the web page to the middle, but keeping it at the top of the page?
Here is the code of the HTML:
<html>
<head>
<title>Batch File Generator | Home</title>
</head>
<link href="style.css" rel="stylesheet" >
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</li></a>
<li><a>Ask the developers</li></a>
</ul>
</li>
<li><a>News</a></li>
</ul>
</html>
And here is the code of the CSS:
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
For HTML Code, use this:
<div class="wrapper">
<div class="middle-content">
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</a></li>
<li><a>Ask the developers</a></li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</div>
</div>
For css code:
html{
height: 100%;
}
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
height: 100%;
}
.wrapper{
display: table;
width: 100%;
height: 100%;
}
.middle-content{
display: table-cell;
vertical-align:middle;
width: 100%;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
Solution with flexbox.
* {
box-sizing: border-box;
}
html,
body,
ul {
padding: 0;
margin: 0;
}
nav {
width: 100%;
background-color: darkgray;
}
li {
list-style: none;
padding: 15px;
border: thin solid lightgray;
position: relative;
background-color: white;
}
li>a {
display: inline-block;
text-decoration: none;
}
.main-menu {
display: flex;
justify-content: center;
}
.sub-menu {
display: none;
position: absolute;
left: 0px;
width: 100%;
margin-top: 15px;
}
.main-menu li:hover {
background-color: lightgreen;
}
.sub-menu li:hover {
background-color: lightblue;
}
.main-menu li:hover>.sub-menu {
display: block;
}
<nav>
<ul class="main-menu">
<li><a>Home</a></li>
<li><a>Download</a>
<ul class="sub-menu">
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul class="sub-menu">
<li>Community forums</li>
<li>Ask the developers</li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</nav>
I'm having problems where my dropdown menu made with CSS and HTML will force a linebreak and the dropdown menu will glitch out. You can see this problem by running my code.
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Home
</li>
<li>
About Us <i class="fa fa-angle-down" aria-hidden="true"></i>
</li>
<li>
Bolivia
</li>
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
Whenever you hover over "products" the code glitches out and forces a line break. I want to make it so that it doesnt affect the flow of the document. I've already tried to set the float to left and that didn't work.
Thank you!
Instead of position: static; on .dropdown I would go with position:absolute
You will need to iron out some padding and margin of your ul and li tags for proper fit
add position:relative to .dropdown li
See snippet below (I took out some menu items to ensure proper inspection of your product sub-menu where the issue lies)
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
padding: 0;
}
.dropdown li {
margin: 0px;
list-style-type: none;
position: relative;
left: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 40px;
padding-left: 40px;
background: #f2f2f2;
}
.main-nav {
position: relative;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Hind:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="copla.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Copla</title>
</head>
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
</body>
</html>
I have the following html for my header.
<header id="header">
<img src="images/logo.png"/>
<div class="container">
<nav id="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Pricing
</li>
<li>
Sessions
</li>
<li>
Sign Up
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</header>
I have the following for my CSS:
img .header-basic{
height:30px;
}
#content {
margin: 5px;
margin-top:00px;
}
#logo {
height: 100px;
top: 0px;
position: absolute;
left: 75px;
}
#content img{
float:right;
}
/*Header*/
#header img {
width: 450px;
height: auto;
display:block;
margin: 0 auto;
}
#media only screen and (max-width:800px) {
#header img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
/*End Header*/
My media query activates for making the image smaller but the text stays the same. I want the margin to be decreased to keep all the navigation on one line. I am coding in Visual Studio and testing in Chrome 55.0.2883.87 m (64-bit).
you can just decrease the margin and the font-size to make them in one line like this :
img .header-basic{
height:30px;
}
#content {
margin: 5px;
margin-top:00px;
}
#logo {
height: 100px;
top: 0px;
position: absolute;
left: 75px;
}
#content img{
float:right;
}
/*Header*/
#header img {
width: 450px;
height: auto;
display:block;
margin: 0 auto;
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
#media only screen and (max-width:800px) {
#header img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 15px;
font-family: 'Verdana';
}
}
#media only screen and (max-width:468px) {
#nav ul li {
margin-left: 1px;
margin-right: 1px;
}
#nav ul li a {
font-size: 10px;
}
}
/*End Header*/
<header id="header">
<img src="images/logo.png"/>
<div class="container">
<nav id="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Pricing
</li>
<li>
Sessions
</li>
<li>
Sign Up
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</header>
I would like to center the two containers horizontally on the site.
So that the menu with the logo on the right side and the contentblock should be centered.
I tried a lot of things, but nothing works.
Until now i worked with frames, but now i would like to use containers.
Can you please help me?
Thanks a lot!
Best regards, Ronny
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Containertest</title>
<style type="text/css">
body { margin:0; background-color: #333333;}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
/* background: url("ronny_logo.jpg"); */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
/* MENU */
#main_menu{
margin:0px;
padding:0;
height: 150px;
/* width: 100%; /* Breite vom Hauptmenü Container */
padding: 0px 0;
/*overflow: hidden; Remove this*/
position: fixed;
background-color: black;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 30px;
margin-left: 10px;
width: 130px;
text-align: center;
margin-top: 120px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 12pt;
}
#main_menu .logo{
background: none;
width: 445px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 9pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
font-size: 9pt;
color: #FFFFFF;
background-color: #555555;
width: 965px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="ronny_logo.jpg" alt="Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">
<p>fadsfdsfdas</p>
<p>dfsadfaf</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p> </p>
<p>gg</p>
<p> </p>
<p>g</p>
</div>
</div>
</div>
</body>
</html>
Easiest way is to give your container a width and set the margin to 0 (top bottom) auto (left right) along with position: relative so the browser can work out where to position it based on the parent container in this instance your .wrapper class.
.patterned .container{width: 960px; margin: 0 auto; position: relative;}
.container{width: 960px; margin: 0 auto; position: relative;}
By putting the parent class in front of the child class you can selectively target a specific container so if you have two containers with the same class they can be targeted and styled differently.
Another solution using the flex property:
<style>
body {
width: 100%;
margin: 0;
padding: 0;
background-color: #333333;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
}
#main_menu{
margin:0;
padding:0;
height: 150px;
padding: 0px 0;
position: fixed;
background-color: black;
z-index: 2;
width: 965px;
display: flex;
align-items: center;
justify-content: center;
}
#main_menu li{
list-style: none;
float: left;
line-height: 30px;
margin-left: 10px;
width: 130px;
text-align: center;
margin-top: 120px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 12pt;
}
#main_menu .logo{
background: none;
width: 445px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 9pt;
}
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
#content{
overflow: hidden;
margin-top: 150px;
font-size: 9pt;
color: #FFFFFF;
background-color: #555555;
width: 965px;
}
</style>
<body>
<div class="wrapper">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="ronny_logo.jpg" alt="Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
<div id="content">
<p>fadsfdsfdas</p>
<p>dfsadfaf</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p> </p>
<p>gg</p>
<p> </p>
<p>g</p>
</div>
</div>
</body>
There is absolutely no need for more divs.
Cheers!
body {
margin: auto;
max-width: 98%;
overflow-y: scroll;
}
div {
border-radius: 5px;
}
span {
font-weight:bold;
}
#header {
position: absolute;
z-index: 1;
background-color: orange;
height: 70px;
width: 98%;
margin-top: -10px;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 400px;
margin-top: 10px;
padding-top: 1px;
font-size: 20px;
font-family: Verdana, sans-serif;
color: brown;
}
#contact {
position: absolute;
margin-left: 250px;
margin-top: 30px;
padding-top: -1px;
font-family: Verdana, sans-serif;
color: brown;
}
#email {
position: absolute;
margin-left: 360px;
margin-top: 45px;
padding-top: 1px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: brown;
}
a:hover {
font-weight: bold;
}
a,visited {
color: black;
}
#nav {
position: relative;
background-color: brown;
float: left;
width: 11%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
}
#nav_wrapper {
width: 900px;
margin: 0px auto;
text-align: left;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
#nav ul li {
display: block;
}
#nav ul li:hover {
background-color: #333;
width: 219px;
}
#nav ul a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul a:hover {
color: #099;
text-decoration: none;
padding: auto;
}
#nav ul li:hover ul {
display: block;
width: 219px;
}
#nav ul ul {
display: none;
position: absolute;
}
#nav ul ul li {
display: block;
padding: 25.5px;
background-color: #222;
}
#nav ul ul li:hover {
color: #099;
width: 168px;
}
#nav ul ul li,visited {
color: #ccc;
}
ul .sub_navi {
display: none;
}
li:hover .sub_navi {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 220px;
top: 4px;
}
.right {
position: static;
background-color: linen;
float: right;
width: 88%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
padding: 5px;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
text-decoration: underline;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
#company {
font-family: Garamond, serif;
}
#position {
font-style: italic
}
li {
list-style-type: square;
}
#footer {
height: 40px;
width: 100%;
background-color: orange;
position: relative;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id=header>
<p id="name">Henry jones</p>
</div>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>About Me
<ul>
<li>Board Games
<ul class="sub_navi">
<li>Cosmic Encounter</li>
<li>Agricola</li>
<li>Trajan</li>
</ul>
</li>
<li>League of Legends</li>
<li>Sports</li>
</ul>
</li>
<li>Travels
<ul>
<li>Paris</li>
<li>Turks and Caicos</li>
<li>Puerto Rico</li>
<li>Chicago</li>
</ul>
</li>
</li>
<li>Resume</li>
<li>Contact
<ul>
<li>Phone</li>
<li>Email</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="right">
<h4>Welcome</h4>
<p><img src="https://pbs.twimg.com/media/CAY3PIpXEAAkO75.png"></a>
</p>
I have created the drop down menu but I am having some trouble. Please help me with this html. The problem is when I hover my cursor next to the navi bar I, the navigation bar keeps "blinking". I would like some assistant on how to code this more efficiently. Also, where do i put display:none to make the board game sub navi disappear when highlight something else. Thank you.
Try to use width: 100%; for #nav_wrapper. This will solve the problem.
I finally fixed it!
nav ul li {display: block;}
changed to
nav ul li {Visibility: hidden;}
and
nav ul li:hover ul {display: block;width: 219px;}
changed to
nav ul li:hover > ul {Visibility: visible;width: 219px;}