I want to write a vertical menu bar with submenues on the right site.
It works for the first sub but the second one is even thiner then the first.
obviously they have the same code but they even seem to be diffrent.
Here the HTML
<div class="left_col">
<div class="menue_left">
<div class="menu">
<ul class="ja">
<li class="ja" id="Willkommen">Willkommen</li>
<li class="ja SuI" id="SuI">Service & Info
<ul class="ja">
<li class="ja" id="Historisches">Historisches</li>
<li class="ja" id="Oeffnungszeiten">Öffnungszeiten</li>
<li class="ja" id="Angebot">Angebot</li>
<li class="ja" id="Benutzerordnung">Benutzerordnung</li>
<li class="ja" id="Kontakt">Kontakt</li>
</ul>
</li>
<li class="ja MuK" id="Medien">Medien & Konto
<ul class="ja">
<li class="ja" id="Online-Katalog">Online-Katalog</li>
<li class="ja" id="eBook-Ausleihe">eBook-Ausleihe</li>
</ul>
</li>
<li class="ja" id="Impressum">Impressum</li>
</ul>
</div>
</div>
</div>
and here the CSS:
.left_col {
position: relative;
margin: 0;
margin-top: 50px;
width: 242px;
height: 820px;
background: yellow;
}
.menue_left {
position: relative;
width:198px;
height: 195px;
top: 50px;
margin-left: auto;
margin-right: auto;
background: black;
}
.menu {
margin: 0;
padding: 0;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.menu ul {
margin: 0;
padding: 0;
line-height: 40px;
padding: 0;
}
.menu li {
position: relative;
margin: 0;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
padding: 0;
list-style: none;
width: 186px;
width: 200px;
background: #C40012;
z-index: 100;
}
.menu ul li a {
text-align: center;
font-family: "Share", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 16px;
height: 40px;
text-transform: uppercase;
text-decoration: none;
display: block;
color: white;
border: 1px solid white;
z-index: 100;
}
.menu ul ul li a {
border: 1px solid white;
background: #C40012;
z-index: 100;
}
.menu ul li a.ja {
text-decoration: none;
}
.menu ul ul li {
margin-top: 0;
width: 100%;
z-index: 100;
}
.menu ul ul {
position: absolute;
visibility: hidden;
top: 0px;
left: 100%;
z-index: 100;
}
.menu ul li:hover ul {
visibility: visible;
z-index: 100;
}
.menu li:hover {
z-index: 100;
}
.menu a:hover {
color: #333333;
z-index: 100;
}
I'm looking forward to hearing from You.
Kind Regards
Ascawath
add this CSS:
.menu ul ul{
width:100%
}
Jsfiddle
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've created a submenu which appears when you hover over the 'services' link. However, when I move my mouse over to the submenu it disappears due to it sitting below the navigation where I want it to be.
So far I’ve tried leaving the submenu in its natural top position and using z-index to make it sit behind the navigation. I found that this wouldn't work due to the submenu being positioned absolute.
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu"></div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
The submenu should sit exactly below the navigation and stay visible when I move my mouse across from the link to the submenu.
I have included padding-bottom: 20px; on hover
the link need to be connected to the submenu so that it is still hovered
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu"></div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Remove margin .nav ul & add padding for .nav a
.nav ul {
list-style: none;
padding: 0px;
margin:0;
}
.nav a {
color: #000;
padding: 10px 0;
display: block;
}
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
padding: 10px 0;
display: block;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
margin:0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu"></div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
I used this.
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
opacity: 0;
left: 0;
right: 0;
display: none;
}
.sub-menu::before {
content: "";
top: -18px;
width: 100%;
height: 20px;
position: absolute;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu"></div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Just replace this to your existing css, nothing else.
.nav a {
color: #000;
padding-bottom: 20px;
display: inline-block;
}
.nav ul {
list-style: none;
padding: 0px;
margin: 0;
}
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
Can someone help me what is wrong with my code why the "admin's" tab drop down menu does not stay on place where it should be. It should be below the admin tab, however when you put the mouse on the admin tab the drop down goes on the tab beside the admin. I tried to designate an id for the admin's ul however, nothing works. Stays the same. Thank you very much!!
HTML code
<div id="navbar">
<ul>
<li> Home</li>
<li> About us</li>
<li> Games
<ul>
<li> All Games</li>
<li> Outdoor Games</li>
<li> Indoor Games</li>
<li> Games in Groups </li>
<li> Games in Pair</li>
</ul>
</li>
<li>Admin
<ul id="list">
<li>Add entry</li>
<li>Passwor request / suggestions</li>
</ul>
</li>
<li> Contact us</li>
<li> Log out</li>
</ul>
</div>
CSS code:
/*CSS Naigation Bar*/
#navbar {
width: 100%;
height: 100%; }
#navbar ul {
width: 90%;
position: fixed;
list-style: none;
padding: 0;
margin: 0;
top: 0;
left: 12.5%;
right: 0;
z-index: 1;}
#navbar ul li {
background-color: black;
opacity: 0.7;
float: left;
height: 25%;
width: 16.5%;
padding: 0;
margin: 0;
font-family: Arial;
font-weight: bold;
font-size: 16.5px;
text-align: center;
line-height: 20px;}
#navbar ul li a {
display: block;
padding: 7% 10%;
text-decoration: none;
color: #E4E4E4;}
#navbar ul li a:hover {
background-color: transparent;
color: white;
text-shadow: 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;}
#navbar ul li ul {
list-style: none;
width: 20%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 32%;
right: 40%;
z-index: 1;}
#navbar ul li ul li {
width: 100%;
float: none;
background-color: black;
opacity: 10;
text-align: center;}
#navbar ul li:hover ul {
display: block;}
#navbar ul li ul #list{
list-style: none;
width: 20%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 50%;
right: 40%;
z-index: 1;}
/*end*/
Add position: relative to the parent list item.
#navbar ul li {
position: relative;
}
And you might want to add a width to the child list item, so it is readable.
#navbar ul li ul li {
width: 150px; /* for example */
}
Think that was your issue? Here's the fiddle I created
Remove list id; you don't need it; and replace this one css :
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
position: relative;
display: none;
top: 100%;
left: 0;
right: 0;
z-index: 1;
}
Remove left right from #navbar ul li ul
add top padding to #navbar ul li ul
Set width 100% #navbar ul li ul
add position relative to #navbar ul li
#navbar ul li {
background-color: black;
opacity: 0.7;
float: left;
height: 25%;
width: 16.5%;
padding: 0;
margin: 0;
font-family: Arial;
font-weight: bold;
font-size: 16.5px;
text-align: center;
line-height: 20px;
position:relative;}
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
padding-top:10px;
position: absolute;
display: none;
top: 100%;
z-index: 1;}
Fiddle:
http://jsfiddle.net/f3sokdxt/
refer https://jsfiddle.net/95rqykjx/
CSS changes are follows,
#navbar ul li ul, remove width: 20%; and left: 32%;
#navbar ul li add position: relative;
Add position: relative to #navbar ul li and
left: 0; width: 100%; to #navbar ul li ul
Hope this will solve your problem.
#navbar {
width: 100%;
height: 100%;
}
#navbar ul {
width: 90%;
position: fixed;
list-style: none;
padding: 0;
margin: 0;
top: 0;
left: 12.5%;
right: 0;
z-index: 1;
}
#navbar ul li {
background-color: black;
opacity: 0.7;
float: left;
height: 25%;
width: 16.5%;
padding: 0;
margin: 0;
font-family: Arial;
font-weight: bold;
font-size: 16.5px;
text-align: center;
line-height: 20px;
position: relative;
}
#navbar ul li a {
display: block;
padding: 7% 10%;
text-decoration: none;
color: #E4E4E4;
}
#navbar ul li a:hover {
background-color: transparent;
color: white;
text-shadow: 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;
}
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 0;
right: 40%;
z-index: 1;
}
#navbar ul li ul li {
width: 100%;
float: none;
background-color: black;
opacity: 10;
text-align: center;
}
#navbar ul li:hover ul {
display: block;
}
#navbar ul li ul #list {
list-style: none;
width: 20%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 50%;
right: 40%;
z-index: 1;
}
<div id="navbar">
<ul>
<li> Home</li>
<li> About us</li>
<li>
Games
<ul>
<li> All Games</li>
<li> Outdoor Games</li>
<li> Indoor Games</li>
<li> Games in Groups </li>
<li> Games in Pair</li>
</ul>
</li>
<li>
Admin
<ul id="list">
<li>Add entry</li>
<li>Passwor request / suggestions</li>
</ul>
</li>
<li> Contact us</li>
<li> Log out</li>
</ul>
</div>
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;}