So my problem is that I can't get my navigation links focused. When you try to click the link the it doesn't stay focused so the dropdown box only gets displayed for a second.
This is the navigation I am trying to do.
*{
margin: 0px;
padding: 0px;
list-style-type: none;}
header,nav,article,section,footer,aside {
display: block;}
#container {
width: 100%;
margin: 0px auto;}
.nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;}
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height:40px;}
.nav-main > ul {
float: left;}
.nav-main > ul > li {
float: left;}
.nav-item:hover {
background-color: #444;}
.nav-item {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 15px;
height: 40px;
line-height: 40px;}
.sub-link {
text-decoration: none;
color: #fff;}
.nav-content {
position: absolute;
background-color: #444;
height: 200px;
max-height: 0px;
overflow: hidden;}
.nav-content-sub {
padding: 20px;}
.nav-content a:hover {
text-decoration: underline;}
.sub-link {
display: inline-block;
padding: 15px;
line-height: 10px;}
.nav-item:focus {
background-color: #444;}
.nav-item:focus ~ .nav-content {
max-height: 200px;}
<nav class="nav-main">
<div class="logo">Website</div>
<ul>
<li>
News
<div class="nav-content">
<div class="nav-content-sub">
<ul>
<li>Safsafasf</li>
<li>Safsasagsagasg</li>
<li>Qgagsag</li>
<li><a href="" class="sub-link">wKgagsagsagsgsagsaga<a></li>
</ul>
</div>
</div>
</li>
You forgot to give the News a direction (link to a website or page). If you don't want the news item link to a page use "#" instead of "" like so News
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
list-style-type: none;}
header,nav,article,section,footer,aside {
display: block;}
#container {
width: 100%;
margin: 0px auto;}
.nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;}
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height:40px;}
.nav-main > ul {
float: left;}
.nav-main > ul > li {
float: left;}
.nav-item:hover {
background-color: #444;}
.nav-item {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 15px;
height: 40px;
line-height: 40px;}
.sub-link {
text-decoration: none;
color: #fff;}
.nav-content {
position: absolute;
background-color: #444;
height: 200px;
max-height: 0px;
overflow: hidden;}
.nav-content-sub {
padding: 20px;}
.nav-content a:hover {
text-decoration: underline;}
.sub-link {
display: inline-block;
padding: 15px;
line-height: 10px;}
.nav-item:focus {
background-color: #444;}
.nav-item:focus ~ .nav-content {
max-height: 200px;}
</style>
</head>
<body>
<nav class="nav-main">
<div class="logo">Website</div>
<ul>
<li>
News
<div class="nav-content">
<div class="nav-content-sub">
<ul>
<li>Safsafasf</li>
<li>Safsasagsagasg</li>
<li>Qgagsag</li>
<li><a href="" class="sub-link">wKgagsagsagsgsagsaga<a></li>
</ul>
</div>
</div>
</li>
</nav>
</body>
</html>
Related
I have a navbar with a dropdown menu which works perfectly, but to show what is selected I want to make the background change on hover.
But when I try to do this it doesn't fit it looks like this:
And on the dropdown it looks like this:
And I want the background to fit with the navbar, but I don't know how.
nav {
width: 100%;
height: 60px;
background-color: gray;}
nav ul {
float: left;}
nav ul li {
float: left;
list-style: none;
position: relative;}
nav ul li a {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;}
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 60px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 0;}
/*top right bottom left*/
nav ul li ul li a:hover {
padding: 10px 10px 10px 10px;
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
I think this is your requirement.
No need of any taking -margin instead that make ul padding-left to zero and for hover background add padding to <a> tag.
nav {
width: 100%;
background-color: gray;}
nav ul {
float: left;
font-size: 0;
padding: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
background: gray;
}
nav ul li a {
margin-left: 0;
padding:15px 20px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 0;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 15px 20px;}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
there are many points you need to understand Like where to use float, negative margins and should not copy same code on hover state, I removed some of those and added some basic style and your navbar is good to go. you can also check this codepen link https://codepen.io/shahilparichay/pen/OJOJMpj
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: gray;
}
nav ul {
/* float: left; */
}
nav ul li {
/* float: left; */
list-style: none;
position: relative;
display: inline-block;
}
nav ul li a {
margin-left: 0px;
padding: 15px 10px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
color: white;
background-color: lightblue;
}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 15px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 10px 10px 10px 10px;
}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;
}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
You have to edit the padding values to set the background size on hover.
To change the background color to match the navbar when hovered in the category:
change this code:
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
to this:
nav ul li a:hover {
margin-left: -60px;
padding:16px;
margin-right: 10px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;
}
Blog about padding:
https://www.w3schools.com/css/css_padding.asp
I don't have time to trace your code, but you can use this code and make changes according to your need:
<!DOCTYPE html>
<html>
<head>
<title> Responsive Navigation Menus with Social Media</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function () {
$(".toggle-nav").click(function () {
$(".menu ul li").slideToggle("slow");
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: arial;
}
.menu {
width: 100%;
background: #333;
overflow: auto;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 70px;
}
.menu ul li {
float: left;
}
.menu ul li a {
text-decoration: none;
width: 100px;
display: block;
text-align: center;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.menu ul li a:hover {
background: #6666ff;
}
.menu ul li a.active {
background: orange;
}
.toggle-nav {
color: #fff;
text-decoration: none;
display: none;
}
.social {
float: right;
margin-right: 100px;
line-height: 70px;
}
.social a {
max-width: 50px;
text-align: center;
}
.social a i {
font-size: 20px;
background: #fff;
width: 40px;
height: 40px;
line-height: 40px;
color: #000;
border-radius: 50%;
margin: 5px;
}
.social a i:hover {
background: #6666ff;
color: #fff;
}
#media(max-width:800px) {
.toggle-nav {
font-size: 40px;
text-align: center;
font-weight: bold;
padding: 10px 0px 10px 0px;
background: #6666ff;
width: 100%;
display: block;
}
.menu ul li a {
width: 100%;
}
.menu ul li {
float: none;
width: 100%;
display: none;
;
}
.social {
width: 100%;
text-align: center;
border-top: 1px solid #fff;
float: none;
}
}
#media(min-width:850px) {
.menu ul li {
display: block !important;
}
}
</style>
</head>
<body>
<nav class="menu">
<a class="toggle-nav" href="#">☰</a>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>News</li>
<li>Blog</li>
<li>About</li>
<li>Privacy</li>
<li>Contact</li>
</ul>
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
</div>
</nav>
</body>
</html>
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!
The code below has issues.
The CSS code for the menu bar does not seem to be working along with the HTML.
<!DOCTYPE html>
<html>
<body class="news">
<head>
<style type="text/css">body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}</style>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>
I do not understand why the code does not work.
This is correct code which you need...
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<!DOCTYPE html>
<html>
<body class="news">
<head>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>
I am making a drop down menu using only HTML and CSS. The menu components are successfully dropping down and everything looks good except when there are two or more components to an element. Then the second one covers the first. I was able to fix this by putting "position: absolute" in "#nav ul li:hover ul" (code below), but then the first item does not clear the menu bar.
Sorry for the terrible description.
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSS/index.css" />
<title>Index</title>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
Here is the CSS
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
position: absolute;
background-color: #ff0000;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
Please check the below code. I have slightly modified your css.
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
padding: 0;
background-color: #ff0000;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li ul li{
background: none;
float: none;
display: block;
}
#nav ul li ul li a {
display: block;
float: none;
background-color: #ff0000;
}
#nav ul li ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
pls replace your entire css with this one
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top: 100%;
padding: 0;
margin: 0;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
float: none;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
#nav ul li li {
float: none;
}
The main dropdown trigger should be #main, the dropdown #nav and #header both have the MAIN PARENT #main. Set #main 'position: relative;' and set a height let's say 50px 'height: 50px;' THEN set #nav 'position: relative; top: 100%;' and the height of #header to 50px as #main.
#main { position: relative; height: 50px; }
#header, #nav { position: absolute; }
#header { width: 100%; height: 100%; top: 0; left: 0; }
#nav { top: 100%; left: 0; min-height: 100px; } /*set it to left or right 0*/
Now the dropdown should trigger on #main:hover #nav { display: block !important; }
Now you must style your dropdown as you want
Modify the below css :
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
Complete code:
<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<style>
body {
background-repeat: no-repeat;
background-size: 100% auto;
}
#main {
background-color: #00ccff;
width: 70%;
}
ul {
list-style: outside none none;
}
#header {
background-color: blue;
text-align: center;
width: 100%;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0;
}
#nav {
width: 100%;
}
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav a {
background-color: #00ccff;
padding: 1vw 3vw;
text-decoration: none;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul {
clear: both;
display: block;
float: none;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
</style>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
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;}