I'm building a menu for my site but for some reason the "event" when i hover over a item does not trigger the class to be activated. Also the active class won't display either
Summary:
1.On_Hover wont work
2.Active wont either
The relevant code is here
#font-face {font-family: Futura; src: url('FuturaOriginal.ttf');}
#font-face {font-family: FuturaLight; src: url('FuturaLight.ttf');}
#font-face {font-family: FuturaBold; src: url('FuturaBold.ttf');}
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
#primary_nav_wrap
{
margin-top:100px;
text-align: center;
position: fixed;
width: 100%;
color: white;
border-bottom: 5px solid darkgreen;
background-color: #FFDE46;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
display: inline-block;
margin:0;
padding:0;
color: darkgreen;
}
#primary_nav_wrap ul a
{
display:block;
color: white;
text-decoration:none;
font-weight:700;
font-size:20px;
line-height:32px;
padding:0 15px;
font-family: FuturaBold;
color: white;
background-color: darkgreen;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
color: white;
}
#primary_nav_wrap ul li.current-menu-item
{
background-color: lawngreen;
color: white;
}
#primary_nav_wrap ul li:hover
{
background-color: black;
color: white;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background-color: white;
color: darkgreen;
padding:0;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
border: 1px solid #FFDE46;
color: White;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
color: White;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%;
color: white;
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
}
.spacer
{
width: 100%;
height: 110px;
}
.side
{
position: fixed;
width: 250px;
border-right-style: solid;
border-width: 5px;
height: 100%;
align-self: left;
float: left;
}
.main
{
width: 100%;
float: left;
}
H1 {
font-size: 60px;
margin-top: 0;
padding-bottom: 50px;
padding-top: 1px;
text-align: center;
list-style-type: none;
position: fixed;
width: 100%;
top: 0;
font-family: FuturaBold;
color: green;
background-color: #FFDE46;
}
/*Opmaak van je header2*/
H2 {
font-family: Futura;
font-size: 40px;
/*Kleur toevoegen*/
color: darkgreen;
/*Tekst centreren*/
text-align:center;
}
/*Opmaak header3*/
H3 {
font-family: Futura;
/*Kleur toevoegen*/
font-size:30px;
color: darkgreen
}
p.futura20{
font-family: Futura;
font-size: 16px
}
p.futura25{
font-family: Futura;
font-size: 20px
}
.spacer2
{
height: 10px;
}
#footer {
margin-bottom: 0px;
align-self: bottom;
height: 200px;
background-color: #FFDE46;
position: relative;
}
.scoutsgidsen {
height: 150px;
position: absolute;
left: 300px;
bottom: 20px;
}
.logo {
height: 150px;
position: absolute;
right: 300px;
bottom: 20px;
}
.avondlied {
font-family: Futura;
font-size: 18px;
text-align: center;
font-weight: 800;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Nieuws</li>
<li>Takken ▼
<ul>
<li>Kapoenen (6-8 jaar)</li>
<li>Kawellen (8-11 jaar)</li>
<li>Jonggivers (11-14 jaar)</li>
<li>Givers (14-17 jaar)</li>
<li>Jin, leiding en VT (+17 jaar)</li>
</ul>
</li>
<li>Activiteiten ▼
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Jonggivers</li>
<li>Givers</li>
</ul>
</li>
<li>Praktisch ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
<li>Jaarthema</li>
<li>Rituelen</li>
</ul>
</li>
<li>Algemeen</li>
<li>Over</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Verhuur</li>
<li>Contact</li>
</ul>
</nav>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
<div class="spacer2"></div>
</div>
<div id="footer">
<img src="logo_Scouts_en_Gidsen_Vlaanderen.png" class="scoutsgidsen"/>
<img src="logo.png" class="logo"/>
</div>
</BODY>
</HTML>
You are applying the hover rule to the li, but that's covered by the a elements, therefore the background color change won't be visible. So it's better to applly the hover rule to the a elements:
#primary_nav_wrap ul li a:hover instead of #primary_nav_wrap ul li:hover
Similarly with .current-menu-item(I suppose that's what you mean by "active class":
#primary_nav_wrap ul li.current-menu-item a
{
background-color: lawngreen;
color: white;
}
#font-face {font-family: Futura; src: url('FuturaOriginal.ttf');}
#font-face {font-family: FuturaLight; src: url('FuturaLight.ttf');}
#font-face {font-family: FuturaBold; src: url('FuturaBold.ttf');}
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
#primary_nav_wrap
{
margin-top:100px;
text-align: center;
position: fixed;
width: 100%;
color: white;
border-bottom: 5px solid darkgreen;
background-color: #FFDE46;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
display: inline-block;
margin:0;
padding:0;
color: darkgreen;
}
#primary_nav_wrap ul a
{
display:block;
color: white;
text-decoration:none;
font-weight:700;
font-size:20px;
line-height:32px;
padding:0 15px;
font-family: FuturaBold;
color: white;
background-color: darkgreen;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
color: white;
}
#primary_nav_wrap ul li.current-menu-item a
{
background-color: lawngreen;
color: white;
}
#primary_nav_wrap ul li a:hover
{
background-color: black;
color: white;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background-color: white;
color: darkgreen;
padding:0;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
border: 1px solid #FFDE46;
color: White;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
color: White;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%;
color: white;
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
}
.spacer
{
width: 100%;
height: 110px;
}
.side
{
position: fixed;
width: 250px;
border-right-style: solid;
border-width: 5px;
height: 100%;
align-self: left;
float: left;
}
.main
{
width: 100%;
float: left;
}
H1 {
font-size: 60px;
margin-top: 0;
padding-bottom: 50px;
padding-top: 1px;
text-align: center;
list-style-type: none;
position: fixed;
width: 100%;
top: 0;
font-family: FuturaBold;
color: green;
background-color: #FFDE46;
}
/*Opmaak van je header2*/
H2 {
font-family: Futura;
font-size: 40px;
/*Kleur toevoegen*/
color: darkgreen;
/*Tekst centreren*/
text-align:center;
}
/*Opmaak header3*/
H3 {
font-family: Futura;
/*Kleur toevoegen*/
font-size:30px;
color: darkgreen
}
p.futura20{
font-family: Futura;
font-size: 16px
}
p.futura25{
font-family: Futura;
font-size: 20px
}
.spacer2
{
height: 10px;
}
#footer {
margin-bottom: 0px;
align-self: bottom;
height: 200px;
background-color: #FFDE46;
position: relative;
}
.scoutsgidsen {
height: 150px;
position: absolute;
left: 300px;
bottom: 20px;
}
.logo {
height: 150px;
position: absolute;
right: 300px;
bottom: 20px;
}
.avondlied {
font-family: Futura;
font-size: 18px;
text-align: center;
font-weight: 800;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Nieuws</li>
<li>Takken ▼
<ul>
<li>Kapoenen (6-8 jaar)</li>
<li>Kawellen (8-11 jaar)</li>
<li>Jonggivers (11-14 jaar)</li>
<li>Givers (14-17 jaar)</li>
<li>Jin, leiding en VT (+17 jaar)</li>
</ul>
</li>
<li>Activiteiten ▼
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Jonggivers</li>
<li>Givers</li>
</ul>
</li>
<li>Praktisch ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
<li>Jaarthema</li>
<li>Rituelen</li>
</ul>
</li>
<li>Algemeen</li>
<li>Over</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Verhuur</li>
<li>Contact</li>
</ul>
</nav>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
<div class="spacer2"></div>
</div>
<div id="footer">
<img src="logo_Scouts_en_Gidsen_Vlaanderen.png" class="scoutsgidsen"/>
<img src="logo.png" class="logo"/>
</div>
</BODY>
</HTML>
Related
I am very new to programming and am working on a website as a project for a class. I am attempting to create a drop down menu, but I continually run into an issue where my links in the drop down sub-menu are not taking up the full width I would like. See the pic below.
https://i.stack.imgur.com/u6koe.png
I would like the link and thus the hovered white background to extend the full width of the sub-menu but I cannot figure out how to make it work.
Here is my HTML:
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
Here is my CSS:
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
}
Any assistance is appreciated.
Add display: inline-block; and width: 100%; to your #menu li ul.submenu li a css rule.
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
display: inline-block;
width: 100%;
}
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
I need help to implement my logo image into the navigation bar. I tried many various ways to try and do this, however I never managed. The logo ends up being on top of my menu instead being in line with it.
<head>
<link rel="stylesheet" type="text/css" href="Homestyle.css">
<meta charset="UTF-8">
</head>
<body>
<div>
<img class="left" src="logo.png" alt="logo">
<ul class="nav">
<li><a class="active" href="Homepage.html"> Home</a></li>
<li> About</li>
<li> Our Work</li>
<li> Services</li>
<li> Contact</li>
</ul>
</div>
</div>
</body>
</html>
.nav{
list-style-type: none;
margin: 0px;
padding: 0;
background-color: #3399ff;
border: 1px solid #555;
overflow: hidden;
width:100%;
top:0;
padding-left: 200px;
}
.nav li a{
display: block;
color: #fff;
padding: 16px 10px;;
text-decoration: none;
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.nav li{
float: left;
}
.nav li a.active{
background-color: #3399ff;
color: white;
}
.nav li a:hover.active{
background-color: #4da6ff;
}
.nav li a:hover:not(.active){
background-color: #4da6ff;
color: white;
}
body{
margin: 0;
background: url("backtest3.jpg");
background-size: 100%;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
display:inline;
vertical-align:top;
}
.left { float: left; }
Put the logo in the navaber and give it some padding as follows:
.nav{
list-style-type: none;
margin: 0px;
padding: 0;
background-color: #3399ff;
border: 1px solid #555;
overflow: hidden;
width:100%;
top:0;
padding-left: 200px;
}
.nav li a{
display: block;
color: #fff;
padding: 16px 10px;;
text-decoration: none;
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.nav li{
float: left;
}
.nav li a.active{
background-color: #3399ff;
color: white;
}
.nav li a:hover.active{
background-color: #4da6ff;
}
.nav li a:hover:not(.active){
background-color: #4da6ff;
color: white;
}
body{
margin: 0;
background: url("backtest3.jpg");
background-size: 100%;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
display:inline;
vertical-align:top;
}
.left { float: left; padding: 16px 10px; }
<div>
<ul class="nav">
<img class="left" src="logo.png" alt="logo">
<li><a class="active" href="Homepage.html"> Home</a></li>
<li> About</li>
<li> Our Work</li>
<li> Services</li>
<li> Contact</li>
</ul>
</div>
Try the following:
.nav {
float:left;
width: calc(100% - 100px) /* apply the logo width instead of 100px */
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
background: blueviolet;
font-size:70px;
font-weight: bolder;
margin:0 auto;
padding:15px;
text-align: center;
}
ul ul {
display: none;
}
ul li:hover > ul{
display: block;
}
.ul1 {
position:absolute;
top: 15px;
width:50%;
font-size: 30px;
}
.ul1 li{
/* display: block;*/
list-style-type: none;
background: black;
border-right: 1px solid white;
color:white;
width: 90px;
float:left;
text-align: center;
text-decoration: none;
padding: 5px;
}
.sub1 li a{
list-style-type:none;
background: black;
color:white;
text-align: center;
text-decoration: none;
}
.ul1 li:last-child {
border-right: none;
}
.sub1 li,a{
border-right: none;
}
.ul1 :hover {
background: black;
color: yellow;
}
.sub1 li{
position: relative;
right:45px;
}
.sub1 li:hover {
background: white;
color:black;
}
.sub1 a:hover {
background: white;
color: black;
text-decoration: underline;
}
img{
width: 200px;
height: 200px;
/* position: absolute;*/
top:270px;
float: left;
transition: all .2s ease-in-out;
}
img:hover{
transform:scale(1.9);
}
.p2{
font-size:24px;
margin: 0px;
color:blue;
margin-right: 25px;
}
body{
background: grey;
}
/* #media(max-width:500px){
h1 {
float: right;
}
}*/
</style>
</head>
<body>
<div id="div0">
<h1 >Καλήμερα Ελλάδα!!</h1>
<ul class="ul1">
<li>Home</li>
<li>Menu</li>
<li>Menu2
<ul class="sub1">
<li>Home</li>
<li>Menu</li>
<li id="ok">Menu2</li>
</ul>
</li>
</ul>
<p class="p1">
<img src="./images/im1.png" >
</p>
<p class="p2">
</p>
</div>
</body>
</html>
On submenu Menu2 link how i can fill the gap?
If you point mouse around the Menu2 you will see that it is not filled properly.
I removed the black background on ".sub1 li a", and created a new selector ".sub1 li:hover a" and set the color to black in there. Updated code can be found below.
h1 {
background: blueviolet;
font-size:70px;
font-weight: bolder;
margin:0 auto;
padding:15px;
text-align: center;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
.ul1 {
position:absolute;
top: 15px;
width:50%;
font-size: 30px;
}
.ul1 li {
/* display: block;*/
list-style-type: none;
background: black;
border-right: 1px solid white;
color: white;
width: 90px;
float: left;
text-align: center;
text-decoration: none;
padding: 5px;
}
.sub1 li a {
list-style-type: none;
color: white;
text-align: center;
text-decoration: none;
}
.ul1 li:last-child {
border-right: none;
}
.sub1 li, a {
border-right: none;
}
.ul1 :hover {
background: black;
color: yellow;
}
.sub1 li {
position: relative;
right:45px;
}
.sub1 li:hover {
background: white;
color:black;
}
.sub1 li:hover a {
color: black;
}
.sub1 a:hover {
background: white;
color: black;
text-decoration: underline;
}
img {
width: 200px;
height: 200px;
/* position: absolute;*/
top: 270px;
float: left;
transition: all .2s ease-in-out;
}
img:hover {
transform: scale(1.9);
}
.p2 {
font-size: 24px;
margin: 0px;
color: blue;
margin-right: 25px;
}
body {
background: grey;
}
/* #media(max-width:500px){
h1 {
float: right;
}
}*/
<div id="div0">
<h1>Καλήμερα Ελλάδα!!</h1>
<ul class="ul1">
<li>Home</li>
<li>Menu</li>
<li>Menu2
<ul class="sub1">
<li>Home</li>
<li>Menu</li>
<li id="ok">Menu2</li>
</ul>
</li>
</ul>
<p class="p1">
<img src="./images/im1.png">
</p>
<p class="p2">
</p>
</div>
I am building a site and I am stuck with a problem... when I hover over a li element and the submenu is displayed, I can't click anything inside it because it closes really fast.
Code added below -
<div class="col-md-9">
<ul>
<li>Home</li>
<li>Order
<ul class="submenu1" style="margin-left: -35px">
<li><center>Order Entry<hr/></center></li>
<li><center>Shipment Details<hr/></center></li>
<li><center>Accounts Department<hr/></center></li>
<li><center>Machine Installation Group<hr/></center></li>
<li><center>Commercial Group<hr/></center></li>
<li><center>Order Enquiry<hr/></center></li>
<li><center>Order Status<hr/></center></li>
</ul>
</li>
</ul>
</div>
.nav
{
height:100px;
background-color:darkslateblue;
}
.image
{
height:400px;
background-image: url('../images/image.png');
background-repeat: no-repeat;
background-size:cover;
}
.image h1
{
color:white;
margin-left:150px;
text-align: center;
font-size:25px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:150px;
}
.nav a
{
color:white;
font-family: 'Raleway', sans-serif;
font-weight:600;
font-size:12px;
text-transform:uppercase;
padding:20px;
}
.nav li
{
display:inline;
}
.nav .container
{
padding:30px;
}
.menu2
{
height:50px;
background-color: darkslateblue;
}
.info
{
height:400px;
background-color: white;
}
.info h1
{
color: darkslateblue;
text-align:center;
font-size:50px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:25px;
}
.info p
{
color: black;
font-family: 'Raleway', sans-serif;
margin: 50px;
font-size:20px;
font-weight:bold;
}
.footer
{
height:50px;
background-color:darkslateblue;
}
.footer p
{
color:white;
text-transform: uppercase;
padding:10px;
}
.setPass
{
margin-top:60px;
margin-left:500px;
}
.submenu1
{
width:200px;
height:450px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu1 ul
{
display:none;
position:absolute;
}
.submenu1 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu1
{
display:block;
position:absolute;
}
.submenu2
{
width:200px;
height:230px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu2 ul
{
display:none;
position:absolute;
}
.submenu2 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu2
{
display:block;
position:absolute;
}
.submenu3
{
width:200px;
height:300px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu3 ul
{
display:none;
position:absolute;
}
.submenu3 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu3
{
display:block;
position:absolute;
}
.submenu4
{
width:200px;
height:110px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu4 ul
{
display:none;
position:absolute;
}
.submenu4 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu4
{
display:block;
position:absolute;
}
I know that there is a gap but i'm not able to remove it.
Please help.
Thanks in advance.
You dirty code that is difficult to maintain in the future
Try to take out the styles in the css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
/* use reset.css or normalize.css */
}
ul{
list-style: none;
display: flex;
}
ul> li{
position: relative;
}
ul> li a{
display: block;
padding: 5px 10px;
}
.submenu{
display: none;
position: absolute; top: 100%; left: 0;
}
ul> li:hover .submenu{
display: block;
}
<ul>
<li>Home</li>
<li>Order
<ul class="submenu">
<li>Order Entry</li>
<li>Shipment Details</li>
<li>Accounts Department</li>
<li>Machine Installation Group</li>
<li>Commercial Group</li>
<li>Order Enquiry</li>
<li>Order Status</li>
</ul>
</li>
</ul>
Delete margin-top: 44px from class submenu1 and other submenus
Fiddle: https://jsfiddle.net/7mnu4Lcx/1/
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;}