<!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>
Related
I am trying to do an icon navbar where on hover the icon also hovers the same colour, I have the icon sort of positioned but at the same time I can't push it to the right or it disappears.
The main goal is pretty much put the icon to the left of the a href with about 3px of padding of the right so it's not touched the text and on the nav menu hover the icon hovers the same colour as the text for each nav item.
HTML
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><div class="fa-icon-home"></div>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
CSS:
.fa-icon-home {
background-image: url('../img/home.png');
background-repeat: no-repeat;
height: 22px;
position: relative;
top: 15px;
right: 10px;
}
.fixed-nav-bar {
position: fixed;
width: 100%;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
line-height: 70px;
width: 100px;
max-width: 120px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
font-size: 20px;
}
.menu a:hover, .menu a:target {
display: block;
color: #72BCD4;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
border-top: 2px solid transparent;
}
.menu-items a {
text-decoration: none;
display: block; /* New Line */
}
.menu-items li:hover {
border-top: 2px solid #72BCD4;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
I changed the way the icon is applied, using a:before now.
.menu-items li {
position: relative;
}
.menu-items li:nth-child(1) a:before {
font-family: FontAwesome;
color: white;
content: "\f015";
position: absolute;
top: 0;
left: -.5em;
}
.fixed-nav-bar {
position: fixed;
width: 100%;
background-color: #3f3f3f;
}
.fixed-nav-bar li,
.fixed-nav-bar a {
line-height: 70px;
width: 100px;
max-width: 120px;
}
.menu {
width: 90%;
max-width: 960 px;
margin: 0 auto;
text-align: center;
}
.menu a,
.menu a:visited {
color: #ffffff;
overflow: hidden;
font-size: 20px;
}
.menu a:hover,
.menu a:target {
display: block;
color: #72BCD4;
}
.menu-items li {
display: inline-block;
border-top: 2px solid transparent;
}
.menu-items a {
text-decoration: none;
display: block;
}
.menu-items li:hover {
border-top: 2px solid #72BCD4;
}
.menu-items li:hover a:before {
color: #72BCD4;
}
.show,
.hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
Here, changed a few CSS rules and here you go:
.fixed-nav-bar {
position: fixed;
width: 100%;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
line-height: 70px;
width: 100px;
max-width: 120px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
font-size: 20px;
}
.menu a:hover, .menu a:target {
display: block;
color: #72BCD4;
}
.fixed-nav-bar .fa-home:hover {
color: #72BCD4;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
border-top: 2px solid transparent;
}
.menu-items a {
text-decoration: none;
display: block; /* New Line */
}
.menu-items li:hover {
border-top: 2px solid #72BCD4;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><i class="fa fa-home" aria-hidden="true"></i> HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
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>
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>
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;}
I have a quick question, can anyone help me out with making my menu look like the the on this website:
https://forums.digitalpoint.com/threads/please-help-with-css-navigation-overhang.2102229/
I have tried several things now and just can't seem to get it...
My current code is:
HTML:
<div class="navbar">
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
</div>
CSS:
/*Content for Navigation Bar*/
.navbar {
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #534b49;
text-align: center;
float: left;
font-size: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
padding-right: 15px;
}
.navbar li a {
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
text-decoration: none;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
Thanks in advance!
Jock
Here is the latest code :
Html
<div>
<div class="navbar">
<div class="cornerl"></div>
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
<div class="cornerr"></div>
</div>
<div class="strip" style="clear:both"> </div>
</div>
css
.navbar {
position: relative;
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #004080;
text-align: center;
float: left;
font-size: 16px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
}
.navbar li a {
padding:12px;
padding-bottom:15px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
border-radius:3px;
text-decoration: none;
background:#ff7000;
color:#534b49;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
.strip{
background-color: #ff7000;
height: 3px;
width: 948px;
margin-left: 7px;
}
.cornerl{
border-color: transparent #FF7000 transparent transparent;
left: -10px;
}
.cornerl,.cornerr{
position: absolute;
bottom: -10px;
z-index: -1;
border-style: solid;
border-width: 10px;
}
.cornerr{
float:right;
right:-10px;
border-color: transparent transparent transparent #FF7000;
}
here is the live example