Hello i have problem with the drop-down menu link to the menu when you hover product the drop-down menu is weird and i struggle can you please help ?
thank you
The HTML:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="faq">Products
<ul>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</li>
<li class="service">Pricing</li>
<li class="contact">Contact</li>
<li class="logout">Logout</li>
</ul>
</div>
The CSS:
body {margin: 0;
padding: 0;
background: #ccc;}
.nav ul {list-style: none;
background-color: #1dde1d;
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: #23c823;}
.nav ul li ul li {display: none;}
.nav ul li:hover ul li{display: block;}
#media screen and (min-width: 600px) {
.nav li {width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;}
#container {min-height:100%;
position:relative;}
.footerWrap {width:100%;
position:fixed;
bottom: 0px;}
.footer {width:200px;
margin:auto;}
.footerContent {float:left;
width:100%;
background-color:#009900;
padding:1px 0;}
.footer p {float:left;
width:100%;
text-align:center;}
/* Option 1 - Display Inline */
.nav li {display: inline-block;
margin-right: -4px;}
}
Remove height: 40px; from .nav li and add position: relative; to .nav ul it works well.
.nav ul {
list-style: none;
background-color: #1dde1d;
text-align: center;
padding: 0;
margin: 0;
position: relative; //added position.
}
Check Your updated Fiddle here.
At a sheer guess based on the limited info in the question... try this CSS:
.nav ul li {position:relative;}
.nav ul li ul {position:absolute;top:100%;}
Related
When I hover over the teams navbar, instead of the listed teams appearing directly beneath it vertically, it goes 1 down then displays it from left to right and I'm not sure why because under nav ul li:hover > ul I put display:block which in theory should work
nav ul {
/*Manages locations of the nav boxes*/
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0 0 0 -12px;
padding: 0px;
}
nav ul li {
/*Orders the nav boxes from left to right*/
float: left;
}
nav ul li a {
/* All the boxes like News, Table etc*/
display: inline-block;
padding: 17px 17px 17px 17px;
background-color: gray;
border: 1px solid black;
display: block;
line-height: 40px;
font: 95% Helvetica, Arial, sans-serif;
color: #66ff66;
text-decoration: none;
border-radius: 5px;
font-size: 15px;
}
nav ul li a:hover {
opacity: .7;
text-decoration: none;
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover>ul {
display: block;
}
<nav>
<div class="panel center">
<ul>
<li>Home</li>
<!--All the pages on the website-->
<li>Table</li>
<li>News</li>
<li>Teams
<ul>
<li>Juventus</li>
<li>AC Milan</li>
<li>Torino</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</nav>
The float:left is causing it on the nav ul li. It's making all li's under the nav be floated left. If you change it to nav>div>ul>li, it'll solve the issue.
nav ul { /*Manages locations of the nav boxes*/
display:block;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0 0 0 -12px;
padding:0px;
}
nav>div>ul>li { /*Orders the nav boxes from left to right*/
float:left;
}
nav ul li a { /* All the boxes like News, Table etc*/
display:inline-block;
padding: 17px 17px 17px 17px;
background-color: gray;
border:1px solid black;
display: block;
line-height: 40px;
font: 95% Helvetica, Arial, sans-serif;
color: #66ff66;
text-decoration: none;
border-radius: 5px;
font-size: 15px;
}
nav ul li a:hover{
opacity: .7;
text-decoration: none;
display:block;
}
nav ul ul{
display:none;
position:absolute;
}
nav ul li:hover > ul{ /*Highlights box when you hover over it*/
display:block;
}
<nav>
<div class="panel center">
<ul>
<li>Home</li> <!--All the pages on the website-->
<li>Table</li>
<li>News</li>
<li>Teams
<ul>
<li>Juventus</li>
<li>AC Milan</li>
<li>Torino</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</nav>
Instead of using float:left; on your lis, use display:inline-block, but make sure to target only the parent lis so that the sub-menu lis are still stacking on top of each other.
nav ul { /*Manages locations of the nav boxes*/
display:block;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0 0 0 -12px;
padding:0px;
}
.panel > ul > li {
display:inline-block;
}
nav ul li a { /* All the boxes like News, Table etc*/
display:inline-block;
padding: 17px 17px 17px 17px;
background-color: gray;
border:1px solid black;
display: block;
line-height: 40px;
font: 95% Helvetica, Arial, sans-serif;
color: #66ff66;
text-decoration: none;
border-radius: 5px;
font-size: 15px;
}
nav ul li a:hover{
opacity: .7;
text-decoration: none;
display:block;
}
nav ul ul{
display:none;
position:absolute;
}
nav ul li:hover > ul{
display:block;
}
<nav>
<div class="panel center">
<ul>
<li>Home</li> <!--All the pages on the website-->
<li>Table</li>
<li>News</li>
<li>Teams
<ul>
<li>Juventus</li>
<li>AC Milan</li>
<li>Torino</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</nav>
I have asked everyone I know, and I've searched this site too, but no luck. Now I'm asking all of you for help. I am using HTML5 and CSS3 to make my second website. (First one was 7 years ago, looks terrible now!)
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image and any other content on the page. I have tried using the z-index in every possible place (with a position marking) and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the NavBar HTML Code:
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gigs</li>
<li>Groups
<ul>
<li>SB Trio</li>
<li>NYGT</li>
<li>Qtto Bloomdido</li>
</ul>
</li>
<li>Publications</li>
<li>Repairs</li>
<li>Lessons</li>
<li>Contact</li>
</ul>
</div>
Here's the CSS from the NavBar:
#nav { position: relative;
top: 0;
text-align: center;
background-color: #FF9933;
background-image: url(images/WoodAfromosia.jpg);
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 130%;}
#nav ul { list-style: none;
padding: 1;
margin: 0% 0% 0% 0%;}
#nav ul li { float: center;
display:inline-block;
font-weight: bold;
text-transform: uppercase;}
#nav { overflow: hidden; width: 100%;}
#nav ul li a {display: inline-block;
padding: .5em;
background-color: peachpuff;
background-image: url(images/Paperpapyrus.jpg);
border: 2px solid #000;
border-radius: .5em;
margin: 3% 6% 3% 6%;
white-space:nowrap;}
#nav ul ul {display: none;}
#nav ul ul li {display: block;
float: left;
text-align: left;
margin: -6.5% 0% 0% -40% ;
width: 100px;}
#nav li:hover ul { position:absolute; /* Position under correct tab */
display:block;}
#nav li:hover li { float:none;
overflow: visible;}
#nav ul a:link { color: black; }
#nav ul a:visited { color: black; }
#nav ul a:focus { color: blue;
border-color: #fff; }
#nav ul a:hover { color: darkviolet;
border-color: #fff; }
#nav ul a:active {color: cyan; }
Here's the CSS from the Background Image and Intro Image just below the NavBar:
body { position: relative;
padding: 0;
margin: 0;
background-color: azure;
background-image: url(images/Paperwhitebricks.jpg);}
a {text-decoration: none;}
#intro {text-align: center;
margin: -1% 0% -.5% 0%;}
remove overflow:hidden from the #nav it will fix the issue
#nav {
overflow:hidden /* remove */
width: 100%;
}
here is the fiddle
JS Fiddle
I'm stuck with a drop down menu. The problem is that the "parent" link is jumping.
HTML:
<ul id="nav">
<li><span>Page 1</span>
<ul>
<li><a>Extralong Page 1.1</a></li>
<li><a>Page 1.2</a></li>
<li><a>Page 1.3</a></li>
</ul>
</li>
<li>Page 2</li>
<li><span>Page 3</span>
<ul>
<li><a>Page 3.1</a></li>
<li><a>Long description for page 3.2</a></li>
<li><a>Page 3.3</a></li>
<li><a>Page 3.4</a></li>
</ul>
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
#nav {
float: right;
}
#nav ul {
float: left;
}
#nav li {
float: left;
padding-top: 2px;
list-style: none;
background: #3451ff;
}
#nav li a,
#nav li span {
display: block;
text-decoration: none;
font-size: 12pt;
font-weight: bold;
padding: 13px 10px 9px 10px;
}
#nav li a:link, #nav li a:active, #nav li a:visited,
#nav li span {
color: #FFF;
}
#nav li a:hover, #nav li a.active,
#nav li span:hover {
color: #000;
}
#nav li li {
display: none;
}
#nav li:hover li {
display: block;
float: none;
background: #555;
}
#nav li li a {
font-size: 10pt;
margin: 1px;
width: 100%;
background: #3c6f3a;
padding: 5px 0;
}
Demo
How can I make this parent static such that it's width isn't changed on hover? I don't want to use js.
Set a width for the parent:
#nav li {
float: left;
padding-top: 2px;
list-style: none;
width: 100px; /* Add this bad boy */
background: #3451ff;
}
DEMO HERE
You can use position:absolute and make its parent li position:relative Demo
#nav ul {
position:absolute;
right:0;
}
Use position:relative for ul parent and give position:absolute for parent child..it will be working fine.
Here is the updated fiddle :http://jsfiddle.net/nikhilvkd/gmU55/5/
#nav li li {
display: none;
position:relative;
}
#nav li:hover li {
display: block;
float: none;
position:absolute;
background: #555;
}
This menu bar works as it should, until hyperlinks are involved, as the browser inserts its own text formatting.
I tried using the pseudo selectors (a:link a:visited) to counteract this, but that prevents the styling I have already created from showing, (as I want the text to change from grey to white upon hover). I also tried #menubar ul li a:link{} but didn't work. How do I prevent the links from changing colour when they are in lists?
Fiddle here: http://jsfiddle.net/CWB9C/1/
HTML:
<div id="menubar">
<ul>
<li> Home
</li>
<li>Facebook
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Google.com
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Search</li>
</ul>
</div>
CSS:
body {
text-align: center;
}
#menubar ul{
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menubar ul li{
font: 18px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
color:#666;
text-decoration:none;
}
#menubar ul li{
font: 18px;
font-family: latolight;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
}
#menubar ul li:hover {
background: #A03C3A;
color: #D6D6D6;
}
#menubar ul li ul{
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
color:#666;
text-decoration:none;
}
#menubar ul li ul {
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
text-shadow: 0 -1px 0 #000;
z-index:10;
color:#666;
text-decoration:none;
}
#menubar ul li ul li:hover {
background:#4F529F; z-index:10;
}
#menubar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:10;
}
Style the a's not li's, or just set to all the a's
a { color:inherit; text-decoration:none; }
Just create a style that will apply to both li and li > a:
#menubar ul li, #menubar ul li a {
color:#666;
font: 18px;
font-family: latolight;
text-decoration: none;
/* Add whatever additional style you want */
}
jsFiddle
From what I'm reading, I think this is what you want
#menubar a {
color: #whatevershadeofgrayhere;
text-decoration: none;
}
#menubar a:hover {
color: #whatevershadeofwhitehere;
}
#menubar ul li:hover a{
color:#fff;
}
You can use the inherit value for color.
#menubar ul li a {
color: inherit;
}
Then it will inherit from the closest parent with a color style. You can then do something like this for the colors.
#menubar ul li ul li {
color: black;
}
fiddle
(nice menu by the way)
JSFIDDLE
If you hover over products, a dropdown menu should appear (displaying appliance and other), then when you hover over appliance, another submenu should appear (displaying black and white), however this second submenu appears to be 2-3 pixels lower than the parent menu. What CSS is causing it to be lower?
Here's the CSS:
*{
margin: 0px;
padding: 0px;
}
#navbar{
list-style: none;
float: right;
padding-top: 54px;
position: relative;
}
#navbar li{
float:left;
width: 130px;
text-align: center;
}
#navbar li a{
text-decoration: none;
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #524F4F;
font-weight: 600;
}
#navbar li a:hover{
color: #f3a82e;
}
#navbar ul{
list-style: none;
display: none;
position: absolute;
top: 100%;
}
.firstnavmenu{
padding-top: 10px;
}
#navbar ul li{
float: none;
position: relative;
background-color:#f9f9f9;
height: 30px;
border-top: 3px solid white;
}
#navbar ul li a{
padding-top: 6px;
width: 100%;
height: 100%;
display: block;
}
#navbar li:hover > ul{
display: block;
}
#navbar li li:hover{
background-color: #edeaea;
}
#navbar ul ul{
position: absolute;
left: 100%;
top:0;
display: none;
}
#navbar ul ul:hover > ul {
display: block;
}
and heres the html:
<ul id="navbar">
<li>
PRODUCTS
<ul class="firstnavmenu">
<li>
APPLIANCE
<ul>
<li>BLACK </li>
<li>WHITE</li>
</ul>
</li>
<li>OTHER</li>
</ul>
</li>
<li>
TECHNOLOGY
</li>
<li>
PARTNERS
</li>
<li>
COMPANY
</li>
</ul>
Your 3 px solid white border.
Remove it from the 2nd ul li:first-child
#navbar ul ul li:first-child {
border-top:none;
}
Add this to your css
ul.firstnavmenu li ul{
margin-top:-3px;
}
Demo