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;
}
Related
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'm trying to create similar effect found here:
codepen.io/davekilljoy/pen/wHAvb?editors=010
The first button effect to be more specific. I followed most instructions, and added in a few changes to make it fill in from the left instead.
For some reason when I hover over it, it fills in the whole table instead of just the button. I want it to start from the beginning of the button to the end, not from the beginning of the table to the end.
Here's a crappy quality GIF so you get the idea of what's happening now: http://i.imgur.com/vz5TTjy.gif
This is the CSS:
#nav {
float: left;
position: relative;
left: -20px;
}
#nav ul {
list-style-type: none;
}
#nav ul li button {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #383736;
letter-spacing:2px;
text-transform: uppercase;
overflow: none;
cursor: pointer;
outline: 0;
background: none;
background: white;
border: 1px solid #383736;
border-radius: 3px;
padding: 7px 12px;
margin: 35px 0px;
z-index: 1;
-webkit-transition: 0.08s ease-in;
}
#nav ul li button:hover {
color: white;
}
#nav ul li button::before {
content: "";
position: absolute;
border: 1px solid white;
background-color: #383736;
right: 100%;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
-webkit-transition: right 0.15s ease;
}
#nav ul li button:hover:before {
right:0;
}
And the HTML:
<div id="nav">
<ul>
<li><button>About Me</button></li>
<li><button>Links</button></li>
<li><button>Contact Me</button></li>
</ul>
</div>
you need to set button in position:relative so pseudo use it as reference.
#nav {
float: left;
position: relative;
left: -20px;
}
#nav ul {
list-style-type: none;
}
#nav ul li button {
position:relative;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #383736;
letter-spacing:2px;
text-transform: uppercase;
overflow: none;
cursor: pointer;
outline: 0;
background: none;
background: white;
border: 1px solid #383736;
border-radius: 3px;
padding: 7px 12px;
margin: 35px 0px;
z-index: 1;
-webkit-transition: 0.08s ease-in;
}
#nav ul li button:hover {
color: white;
}
#nav ul li button::before {
content: "";
position: absolute;
border: 1px solid white;
background-color: #383736;
right: 100%;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
transition: right 0.15s ease;
}
#nav ul li button:hover:before {
right:0;
}
<div id="nav">
<ul>
<li><button>About Me</button></li>
<li><button>Links</button></li>
<li><button>Contact Me</button></li>
</ul>
</div>
I've made a css dropdown menu and I want each dropdown option to have a blue background when it is hovered on. However when I try this the background for the option will only be blue when the top half of it is hovered on. Here it is on jsfiddle. If you hover your mouse on the "products" option and then put the mouse under "plates" but above the gray horizontal line the background won't be blue. Can anybody help me? Thank you.
http://jsfiddle.net/hDWuJ/1/
HTML (Note this is a segment of my web page and so it does not have valid syntax)
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
<ul id="drop-nav">
<li>Home</li>
<li>Products <span id="arrowDown">▼</span>
<ul>
<li>Children's Stuff</li>
<li>Plates</li>
<li>Top Sellers</li>
</ul>
</li>
<li>Services <span id="arrowDown">▼</span>
<ul>
<li>Wash 'n' Fold</li>
<li>Blanket Making</li>
<li>Wedding Dress</li>
<li>Custom</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS
body
{
background-color: #dfdfdf;
}
#title
{
text-align: center;
color: #07a8ca;
font-size:60pt;
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 0px #888888;
}
h1
{
margin: 0px;
padding: 0px;
}
hr
{
height: 3px;
color: #07a8ca;
background: #07a8ca;
font-size: 0;
border: 0;
}
#HorzLineDiv
{
width: 95%;
margin: 2% 0% 3% 0%;
margin-left: auto ;
margin-right: auto ;
}
#Menu
{
width:100%;
}
#drop-nav
{
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
display: inline;
padding: 12px 50px 8px 50px;
margin: 0px 5px 0px 5px;
border-left: 3px solid #07a8ca;
}
ul li:first-child
{
border-left: 0px;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-transform: uppercase;
text-decoration: none;
text-align:center;
color: #000;
font: 25px/1.1em "Kelly Slab","serif";
transition: color 0.4s ease 0s;
-moz-transition: color 0.4s ease 0s; /* Firefox 4 */
-webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
-o-transition: color 0.4s ease 0s; /* Opera */
}
ul li a:hover
{
color: #FF4D4D;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
li:hover a
{
margin:0;
}
li:hover li a:hover
{
background: #21e8fa;
}
#drop-nav li ul li
{
border-top: 0px;
border-left: 0px;
}
#drop-nav ul li a
{
border-top: 3px solid #888;
padding: 13px 0px 13px 0px;
margin: -10px -8px;
text-align:center;
text-transform: none;
position:relative;
top: 13px;
color: #000;
}
#drop-nav ul
{
width:100%;
position:absolute;
right:-5px;
}
a
{
margin:0px;
padding:0px;
}
#arrowDown
{
font-size: 10pt;
vertical-align:text-bottom
}
The main issue is in your margins and padding, but this can be worked around by changing your ul li to display: block; instead of display: inline;.
Of course, this isn't a direct fix to the issue, and there still is an area at the bottom that doesn't work on hover, but it is much smaller than before. The proper way to go about fixing this is fixing your margins and padding.
Demo
UPDATE
Reading deeper into your code, I found the actual problem. It is not in margins or padding as I originally thought, but is a top property of 13px defined in #drop-nav ul li a. That top of 13px was creating a blank, inactive space in your list.
Get rid of that piece and it is working fine: DEMO
I've got a simple dropdown css menu, which is positioned in the footer and with upwards direction - fiddle: http://jsfiddle.net/RmTpc/11/
i would like for opened menu to have some bottom margin from the main li ("Items"), but when i apply margin-bottom: 30px to the ul.dropdown ul, opened menu dissapears on hover.
I've googled and also tried answers from stackoverflow:
Drop down menu with margin-top
How to use (top) margin with CSS3 drop down menu?
but can't get it to work. Any help appriciated, thanks :)
EDIT: Sorry, posted wrong fiddle before, updated the link above.
The problem lies with the margin - it's effectively 'dead space' so you're not actually touching it when you move the mouse up towards it.
I think the best solution is to remove the margin, and add the 30px to the bottom padding of the ul (so you're touching it when you mouseover), and remove the background color:
ul.dropdown ul {
left: 0;
position: absolute;
top: 100%;
visibility: hidden;
z-index: 999;
margin: 0;
width: 300px;
padding: 20px 20px 50px;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
}
(see http://jsfiddle.net/RmTpc/3/)
You'll probably need to adjust the padding of the list items to make up for the lost background space, but this solution should work for you.
EDIT:
Using the updated JSFiddle, you'll need to move your borders to the 'li' elements as well. See the New JSFiddle I set up, or this code:
ul.dropdown ul {
left: 0;
position: absolute;
top: 100%;
visibility: hidden;
z-index: 999;
margin: 0;
width: 300px;
padding: 20px 20px 50px;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
}
ul.dropdown ul li {
float: none;
background: #fff;
border: solid 2px #bbb;
border-top: none;
border-bottom: none;
}
ul.dropdown ul li:first-child {
border-top: 2px solid #bbb;
}
ul.dropdown ul li:last-child {
border-bottom: 2px solid #bbb;
}
Have a look at following CSS:
http://jsfiddle.net/RmTpc/15/
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
height: 100%;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: #222;
z-index: 999;
padding-left: 40px;
}
ul#nav {
font-family: Arial, Helvetica;
font-weight: 300;
}
ul.dropdown, ul.dropdown li {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.dropdown {
float: left;
position: relative;
z-index: 999;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
min-height: 1px;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
cursor: default;
position: relative;
z-index: 600;
}
ul.dropdown ul {
left: 0;
position: absolute;
top: 100%;
visibility: hidden;
z-index: 999;
margin: 0;
width: 300px;
padding-bottom: 30px;
padding-left: 0;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
}
ul.dropdown li:hover > ul {
visibility: visible;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
opacity:1;
zoom: 1;
}
ul.dropdown ul li {
float: none;
background: #fff;
border-left: solid 2px #bbb;
border-right: solid 2px #bbb;
padding-left: 20px;
padding-right: 20px;
}
ul.dropdown ul li:first-child {
border-top: solid 2px #bbb;
padding-top: 20px;
}
ul.dropdown ul li:last-child {
border-bottom: solid 2px #bbb;
padding-bottom: 20px;
}
ul.dropdown ul ul {
left: 99%;
top: 1px;
}
ul.dropdown-upward ul {
bottom: 100%;
top: auto;
}
ul.dropdown li {
color: #fff;
background: #222;
padding: 7px 10px;
}
ul.dropdown li.hover, ul.dropdown li:hover, ul.dropdown li.on {
color: #bbb;
}
ul.dropdown a:link, ul.dropdown a:visited {
color: #000000;
text-decoration: none;
}
ul.dropdown a:hover {
color: #000000;
}
ul.dropdown a:active {
color: #FFA500;
}
ul.dropdown ul li {
font-weight: normal;
}
Your menu will look like you have done it so far. One difference is that I replaced the margin with padding.
UPDATE: I have updated the CSS Code
Put the margin-bottom: 30px in the ul.dropdown ul li block and not for ul.dropdown ul. I think that'll make it work.
I'm trying to put an a:hover over an menu that i created. If you could help me I really appreciate it! What im trying to achieve is to get the black in the whole bar. If you know what I mean.
Here is the menu: (The black is hover)
So here is my CSS for the menu:
#navigation {
padding: 5px;
height: 1em;
width: auto;
text-align: center;
font-family: Verdana;
font-size: 12px;
text-transform: uppercase;
margin-top: -5px;
}
#navigation ul {
background-color: #fff;
width: 1000px;
margin-left: -5px;
}
#navigation li {
float: left;
list-style: none;
width: 100px;
background-color: #fff;
padding: 10px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}
#navigation li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navigation li a:hover {
background-color: #000;
padding:10px;
width: 300px;
color: #fff;
position:absolute;
}
#navigation a {
color: #000;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#navigation a:link {
color: #000;
}
#navigation a:hover {
color: #fff;
background-color: #000;
}
#navigation a:visited {
color: #000;
}
So if you need more information about this, just visit my Website where you can see the issue yourself. http://tomaswebdesign.com
You've got two options, the first is the simplest, simply add the :hover to the li itself:
li:hover,
a:hover {
color: #fff;
background-color: #000;
}
JS Fiddle demo. For the above solution, I'd also suggest (as is included in the linked-demo) that you set color: inherit on the a element (not under a:hover)
The second is to style the a as a block element:
a {
display: block; /* to fill the available horizontal space */
height: 100%; /* to fill the available vertical space */
}
This does require that you remove the padding from the li element though, as that's what's 'forcing' the background-color away from the edge of the element, so:
li {
padding: 0;
}
li a {
padding: 10px; /* so that the padding is preserved, albeit
on the a element instead */
display: block;
height: 100%;
}
JS Fiddle demo.
Try this
#navigation li {
display:block;
float: left;
list-style: none;
width: 100px;
background-color: #fff;
padding: 10px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}
Or you can set anchor width and height to 100%.