I'm trying to make my dropdown menu with pure css3 but my child ul keeps showing on top of the parent. I've tried with z-index -100, removing the positive z-index value from the parent ul, but nothing happens.
This is my code:
http://jsfiddle.net/z9kCx/
I've updated your fiddle here. Would that work?
I added menu and sub-menu classes to your uls and edited your css a bit:
ul.menu li {
position: relative;
width: 100px;
float: left;
background: #2A2A2A;
text-align: center;
font-size: 14px;
padding: 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
list-style-type: none;
}
ul.sub-menu {
padding: 0;
position: absolute;
top: 45px;
left: 0;
width: 145px;
display: none;
opacity: 0;
visibility: hidden;
}
ul.menu li:hover > .sub-menu {
display: block;
opacity: 1;
visibility: visible;
}
Related
So first I would like to say I am extremely new to coding so please keep that in mind!
I was trying to create a dropdown nav bar and I'm having all sorts of issues. First, between the dropdown menu items there is white spaces which I don't understand at all. Second, the actual dropdown portion is not showing up at all when mousing over. I've been trying to fix this for an incredibly long time and I cannot figure out what the problem is.
The website with the issue is: (Dropdown is all the way at the bottom of the page)
https://ist2w.purdueglobal.edu/2204A/IT214-01/MeganAllen5/navigation.html
Here is the html code:
HTML CODE
And the css:
#drop_nav {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#drop_nav ul {
list-style-type: none;
width: 100%;
display: flex;
margins: 0px;
padding: 0px;
}
#drop_nav li {
position: relative;
width: 100%
align-items: center;
}
#drop_nav a {
color: #ffffff;
background-color: #000000;
height: 64px;
font-family: Arial, Helvetica, sans-serif;
text-weight: 500;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: width .4s, height .4s;
}
#drop_nav a:hover {
width: 80px;
height: 75px;
background-color: #dc143c;
}
#drop_nav li:hover .submenu > li {
display: block;
top: 0px;
}
.submenu {
}
.submenu li:hover {
display: block;
top: 0px;
}
#drop_nav li:hover .submenu > li {
display: block;
top: 0px;
}
.submenu li {
display: none;
position: absolute;
top: 0px;
}
.submenu {
display: flex;
flex-direction: vertical;
position: relative;
width: 100%;
}
.submenu li {
position: absolute;
}
.submenu li:hover {
display: flex;
}
.arrow {
margin-left: 8px;
color: #a9a9a9
font-size: 12px;
}
PLEASE HELP!!!!!
Thank you so much.
Here's an example: CodePen.
In this example I only illustrate how the hovering and opening of the menus works. I didn't use any other styling. Note that the <li>.....</li> encapsulates the menus completely.
This is all the styling that is needed to open and close the menus:
#drop_nav ul li ul {
display: none;
}
#drop_nav ul li:hover ul {
display: initial;
}
I have the code there
My question is, why aren't the buttons for different pages centered? This is more obvious when the site is minimized.
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
h1,h3 {
text-align: center;
color: white;
}
li{
list-style-position: inside;
display: inline;
padding-left: 12px;
}
a{
padding: .2em .1em;
color:grey;
background-color: ;
}
}
.xy{
margin-top: 75px;
}
h1{
font-size: 45px;
}
h3{
font-size: 23px;
}
body{
background-color: #451255;
}
nav {
width: 70%;
margin: 0 auto;
background: #fff;
padding: 15px;
box-shadow: 0px 5px 0px #dedede;
position: center;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #451255;
}
}
.btns,
.fill{
margin: auto;
position: center;
display: block;
}
So, I have that code, you can see on the link what it looks like. My problem is that it's not centered. And when I minimize it, the fact that it's not centered is more obvious. How could I fix that?
like #junkfoodjunkie already said, it's about basic CSS reset.
why? elements got initial CSS set, this is what's going on:
like you can see, your menu's items (blue part) are already centered but you've got initial -webkit-padding-start: 40px; (green part) and it's do the same as padding-left: 40px;, it takes not less than 40px from your menu so that's why it looks like the menu's items are not centered/stick to the right, so in order to fix it you need to overwrite the value of the <ul> element.
you're also set the <li> elements to padding-left: 12px; so the menu's items will not be centered perfectly. if you're not going to use some CSS reset then add .fill > ul {padding-left: 0;} to your CSS.
You're not resetting or eliminating default behavior. You have no margin or padding defined on the <ul>, and you have not reset the CSS to begin with, so there is a default padding and margin messing with you. Put margin: 0; padding: 0; on your <ul> and it should work.
Or, just do a full brutal reset: https://jsfiddle.net/efv8x1x2/1/
Added
* {
margin: 0;
padding: 0;
}
to the beginning of the stylesheet, and voila, centered.
I have this menu as a ground to my web page. But I wonder how I could get that menu with a dropdown.I want the other tabs under each menu category to drop down under the slided underline.
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #000;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #343434;
border: none;
transition: .3s ease;
}
You need to put subitems in your menu. Basically an ul inside your li. This ul is non display by default and when we hover on the parent li it will display the ul with a selector like this : ul li:hover ul{}
ul li:hover ul{
display:block;
}
See on jsfiddle
Of course you gonna have to stylize that example but that not the point.
I'm very new to making websites, mostly I do this as a hobby and now I'm working on a website for a friend of mine.
Everything went fine so far but I'm struggling with the menu. (It is also a wordpress website.)
You can preview it at http://www.decapeerwerken.be
The design is quite alright but the problem persists when you come underneath the dropdown menu. There is a sort of range where you can hover where it is not acceptable that the menu drops down, only when you hover on the parent link.
I can see myself that the height of ul.submenu is too high but I can't find it. Already been looking for days after this little issue...
Thank you guys in advance for helping me out!
CODE:
.menu {
text-transform: uppercase;
font-weight: bold;
background: -webkit-linear-gradient(#FEF9CD, #FCE1BC);
background: -o-linear-gradient(#FEF9CD, #FCE1BC);
background: -moz-linear-gradient(#FEF9CD, #FCE1BC);
background: linear-gradient(#FCE3BC, #FEF9CD, #FCE1BC);
border: 1px solid #FCE1BC;
border-radius: 3px;
box-shadow: 1px 1px 10px #A4743d;
}
ul.nav-menu li a {
color: #604443;
font-family:'Oregano', cursive;
}
.nav-menu {
list-style-type: none;
height: 40px;
margin: 0;
}
.nav-menu li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
}
.nav-menu li a {
display: block;
padding: 0 15px;
color: #fff;
text-decoration: none;
}
.nav-menu li:hover {
color: #965A3E;
transition: color 0.8s, box-shadow 0.3s;
background: linear-gradient(#FCE3BC, #FFFCE3, #FCE1BC);
box-shadow: 1px 1px 10px #A4743d;
margin-top: -1px;
background-position: 0 -40px;
}
.nav-menu li ul {
opacity: 0;
position: absolute;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav-menu li:hover ul {
padding-top: 5px;
opacity: 1;
transition: opacity 0.8s;
}
.nav-menu li:hover ul li {
float: none;
position: static;
height: 30px;
line-height: 30px;
background: linear-gradient(#FCE3BC, #FEF9CD, #FCE1BC);
transition: background-color 1.4s, color 0.8s, box-shadow 0.5s;
color: #965A3E;
margin-bottom: 5px;
width: 200px;
}
Replace "opacity:1" (opacity:0) with "display:block;" ("display:none")
Your problem is that hover changes the layout (the contents occupy more space, even though they are hidden, when the parent is not hovered), but also that because you are only changing opacity, the user can still hover the contents when they are hidden.
I managed to fix the issue by transitioning visibility as well as opacity, which means you can no longer hover over the contents when they are invisible:
.nav-menu li ul {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav-menu li:hover ul {
padding-top: 5px;
opacity: 1;
visibility: visible;
transition: opacity 0.8s, visibility 0.8s;
}
What I really want is to have the same effect on the website of www.ditto.com by the menu, if anyone can figure that out, it would be really great, but if not this is what I have and please if anyone can answer this question, I'm in the middle of making a website for someone and I need this info fast!!
This code waits 0.8s when going up but it doesn't wait when it goes down, it just pops down.
Thanks in advance!!
You can see the full code here here: http://jsfiddle.net/zZPPR/
CSS
.one
{
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
}
.two
{
max-height: 200px;
overflow:visible;
}
Here is a solution that target the second animation in the link. Still a draft though.
http://jsfiddle.net/NicoO/T4Nbk/5/
Update: Max-height is causing speed issues, making the feeling the transition too fast or slow. Here is an alternative solution using transforms: http://jsfiddle.net/NicoO/T4Nbk/7/ same version with Chrome vendor prefixes: http://jsfiddle.net/T4Nbk/9/
CSS:
ul
{
margin: 0;
padding: 0;
}
ul > li
{
display: inline-block;
position: relative;
}
ul > li li
{
display: block;
}
ul > li:before
{
background-color:gray;
top: 100%;
bottom:0;
left: 0;
right: 0;
position: absolute;
content: "";
transition-duration: 0.4s;
z-index:-1;
}
ul > li a
{
display: block;
position: relative;
}
ul > li ul
{
max-height: 0;
overflow: hidden;
position: absolute;
left:0;
width: 300px;
background-color: gray;
transition-duration: 0.4s;
transition-property: max-height;
}
ul > li:hover:before
{
top:0;
}
ul > li:hover ul
{
max-height: 400px;
}
HTML:
<nav>
<ul>
<li>Home</li>
<li>News & Events</li>
<li>
Discover
<ul>
<li>Jordan</li>
<li>Jordan</li>
</ul>
</li>
</ul>
</nav>
CSS of the solution using transforms:
Inspired by: How can I transition height: 0; to height: auto; using CSS?
ul
{
margin: 0;
padding: 0;
}
ul > li
{
display: inline-block;
position: relative;
}
ul > li li
{
display: block;
}
ul > li:before
{
background-color:gray;
top: 100%;
bottom:0;
left: 0;
right: 0;
position: absolute;
content: "";
transition-duration: 0.4s;
z-index:-1;
}
ul > li a
{
display: block;
position: relative;
}
ul > li ul
{
transform: scaleY(0);
transition: transform 0.4s;
transform-origin: top;
overflow: hidden;
position: absolute;
left:0;
width: 300px;
background-color: gray;
}
ul > li:hover:before
{
top:0;
}
ul > li:hover ul
{
transform: scaleY(1);
}
What's happening is that you're not transitioning the overflow property. So as soon as the class two is applied, the overflow is set to visible and the content shows immediately.
Remove the overflow:visible from the class .two and it will work
JSFIDDLE
You should remove overflow:visible;