I have a problem with hover on this site I'm doing. The menu is ok in all pages, except the home. What is kinda awkward, 'cause I'm just using php include to change the content, and the header, menu and footer are always the same.
In Firefox and Chrome it's ok, but the problem is that when I mouseover the menu on IE9 it has a displacement, like the image:
example
http://i74.photobucket.com/albums/i265/_k_ps_/exemplo.gif
I think it's something with the display: block, but I don't know how to fix it and make the menu work properly :(
Here is the HTML:
<div id="menu" class="group">
<ul>
<li id="menu-01"><span>Home</span></li>
<li id="menu-02"><span>A Empresa</span></li>
<li id="menu-03"><a href="galeria_representacao.php?image=0">
<img src="images/representacao.jpg" class="menu-head" onMouseOver="this.src='images/representacao-hover.jpg'" onMouseOut="this.src='images/representacao.jpg'"></a>
<ul class="menu-body">
<li>Teste1</li>
<li>Teste2</li>
<li>Teste3</li>
<li>Teste4</li>
<li>Teste5</li>
</ul>
</li>
<li id="menu-04"> <span>Serviços</span></li>
<li id="menu-05"><span>Projetos</span></li>
<li id="menu-06"><span>Novidades</span></li>
<li id="menu-07"><span>Contato</span></li>
<li id="menu-08"><span>E-mail</span></li>
<li id="menu-09"><span>Login</span></li>
</ul>
</div>
And the CSS:
#menu {
width: 834px;
height: 44px;
background-image: url(../images/menu-up.jpg);
display: block;
}
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
#menu ul span {
display: none;
}
#menu ul li {
list-style: none;
display: block;
float: left;
position: relative;
}
#menu li ul {
position: absolute;
display: none;
z-index: 12;
}
#menu li ul li {
clear: both;
position: relative;
margin: 0;
padding: 0;
background-color: #0676c4;
width: 157px;
height: 40px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 14px;
}
#menu li ul li a {
clear: both;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 10px;
margin: 0;
display: block;
}
#menu li ul li a:hover {
background-color: #87c5f1;
height: 20px;
margin: 0;
}
#menu ul li, #menu ul a {
margin: 0;
padding: 0;
text-decoration: none;
height: 44px;
display: block;
}
#menu-01 {
left: 0px;
width: 75px;
}
#menu-01 a:hover {
background-image: url(../images/menu-down.png);
}
#menu-02 {
left: 0px;
width: 112px;
}
#menu-02 a:hover {
background: url(../images/menu-down.png) -75px;
}
#menu-03 {
background-image: url(../images/representacao.jpg);
left: 0px;
width: 157px;
z-index: 11;
border: 0;
}
#menu-04 {
left: 0px;
width: 103px;
}
#menu-04 a:hover {
background: url(../images/menu-down.png) -344px;
}
#menu-05 {
left: 0px;
width: 108px;
}
#menu-05 a:hover {
background: url(../images/menu-down.png) -447px;
}
#menu-06 {
left: 0px;
width: 113px;
}
#menu-06 a:hover {
background: url(../images/menu-down.png) -555px;
}
#menu-07 {
left: 0px;
width: 101px;
}
#menu-07 a:hover {
background: url(../images/menu-down.png) -668px;
}
.menu-head {
border-width: 0;
}
Can somebody help me?
I put your code (and modified it a bit) in a jsfiddle.
The problem, from what I see, seems to be with the 3rd element, which has a child ul.
From what I see from there, you have a problem with your CSS :
This CSS style
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
Affect this HTML element :
<ul class="menu-body">
Which you probably don't want to. (fixed here)
But I'm not sure it's your error, the code you supplied needs the images, and I do not have them...
Also, all your left:0px are useless.
If you want a better answer, you'll have to enhance your question (and/or the jsfiddle!). :-)
Related
I want to make a tab style so the bottom of the tab doesn't have an underline. To do this I thought I could set bottom border color of tab and then make child menu go underneath.
I am not sure if that is possible though.
This excerpt is taken from site, it is done like this as the child menu is usually shown on hover.
body {
background-color: #000;
}
.desktop-menu {
color: #fff;
list-style: none;
}
.desktop-menu a {
color: #fff;
text-decoration: none;
}
.desktop-menu > li {
background-color: blue;
width: 60px;
margin-left: 25px;
border: 1px solid #fff;
border-bottom-color: blue;
padding: 10px;
position: relative;
z-index: 20;
}
.desktop-menu ul {
background-color: blue;
z-index: 10;
width: 200px;
display: flex;
position: absolute;
top: 100%;
left: -1px;
flex-direction: column;
list-style: none;
margin: 0;
padding: 10px 20px;
padding-top: 15px;
border: 1px solid #fff;
background-color: darkblue li;
padding-bottom: 15px;
}
.desktop-menu .has-sub:hover {
border: 1px solid #fff;
}
.desktop-menu .has-sub:hover ul {
display: flex;
}
<ul class="desktop-menu">
<li class="has-sub">Products
<ul>
<li>Product name 1</li>
<li>Prod name 2</li>
</ul>
</li>
</ul>
I am trying to remove this white line:
What is best method to achieve this?
Just a hack but it works.
.desktop-menu > li {
position: relative;
// ...
}
.desktop-menu > li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
width: 100%;
background-color: blue;
}
.desktop-menu ul {
display: none;
transform: translateY(-1px);
// ...
}
.desktop-menu .has-sub:hover ul {
display: flex;
}
See result in codesandbox.
Note: not suitable if you are working with transparent backgrounds.
Edit: updated the sandbox to proof it works with the hover effect.
I need a submenu behind the parent menu. Check out the pic (left is the default browser rendering if I'm working with absolute divs, but I need it like on the right):
http://i67.tinypic.com/2nuqb89.jpg
The submenus should be behind the parent menu, to avoid an overlap. I tried some z-index stuff but it doesnt realy work. Like an z-index: -1 might fix the problem for the first submenu, but not for the second, right?
Maybe this fiddle makes it clearer:
html, body {
height: 100%;
background: darkred;
padding: 0;
margin: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
a {
display: block;
color: darkred;
text-decoration: none;
padding: 1rem 2rem;
}
.mainmenu {
width: 10rem;
background: white;
position: fixed;
height: 100%;
z-index: 99;
}
.mainmenu li:hover > ul {
left: 100%;
}
.mainmenu__sub {
width: 10rem;
position: absolute;
left: 0;
top: 0;
z-index: -2;
transition: all 0.3s ease-in-out;
}
.mainmenu__sub--red {
background: red;
}
.mainmenu__sub--green {
background: green;
}
<ul class="mainmenu">
<li>Menu1
<ul class="mainmenu__sub mainmenu__sub--red">
<li>Submenu1
<ul class="mainmenu__sub mainmenu__sub--green">
<li>Subsubmenu1</li>
<li>Subsubmenu2</li>
<li>Subsubmenu3</li>
</ul>
</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
tldr; I need to reverse the child/parent z-index behavior
Add same color in instant nested li as per below code.
html, body {
height: 100%;
background: darkred;
padding: 0;
margin: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
a {
display: block;
color: darkred;
text-decoration: none;
padding: 1rem 2rem;
}
.mainmenu {
width: 10rem;
background: white;
position: fixed;
height: 100%;
z-index: 99;
}
.mainmenu > li{
background: white;
}
.mainmenu li:hover > ul {
left: 100%;
}
.mainmenu__sub {
width: 10rem;
position: absolute;
left: 0;
top: 0;
z-index: -2;
transition: all 0.3s ease-in-out;
}
.mainmenu__sub--red, .mainmenu__sub--red > li {
background: red;
}
.mainmenu__sub--green, .mainmenu__sub--green > li {
background: green;
}
<ul class="mainmenu">
<li>Menu1
<ul class="mainmenu__sub mainmenu__sub--red">
<li>Submenu1
<ul class="mainmenu__sub mainmenu__sub--green">
<li>Subsubmenu1</li>
<li>Subsubmenu2</li>
<li>Subsubmenu3</li>
</ul>
</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
This is the example : https://jsfiddle.net/5ahw3tec/
HTML
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 1280px;
padding: 0;
}
#gnb {
width: 1280px;
height: 80px;
z-index: 100;
position: fixed;
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
width: 100%;
height: 800px;
background: pink;
}
<div class="container">
<header id="gnb">
<div class="header-area">
<a href="#">
<img src="somelogo" alt="">
</a>
<nav>
<ul>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
</ul>
</nav>
</div>
</header>
<main>
</main>
<footer>
</footer>
</div>
CSS
When I scroll down, the fixed menu bar(logo image and some lists) is located in the top of the page.
But, there is an issue.
When I apply position:fixed to #gnb (in the example above),
the background color(white) that I made earlier is disappeared. I don't know what the problem is exactly..
I want to keep the effect of background color too.
I am applying Bootstrap for container class, but not for the menu bar.
Why does the background color disappear?
Well, you set the color to your container Element, and without any other specifications, the child elements inherit the white background (that's why you override it with pink!)
Setting your Header to position: fixed decouples the #gnb Element from his parent, so it does not have any background color, until you specify one and the color of the element below is visible (which is pink). So you have to manually set the color to white again.
So the answer of Jainam is correct, just add
background-color: #fff to your #gnb
Try below css for this:
see Fiddle Demo
CSS:
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
/* End global */
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 100%;
padding: 0;
}
#gnb {
width: 1280px;
height: 80px;
z-index: 100;
position: fixed;
background-color: #fff;
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
width: 100%;
height: 800px;
background: pink;
}
for fixed menu - use margin-top , top: 0
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 1280px;
padding: 0;
}
/*new */
header {
background-color: #ffffff;
}
#gnb {
width: 1280px;
height: 80px; /* based on this height */
z-index: 100;
position: fixed;
top: 0; /* new */
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
margin-top: 80px;
/* new - based on height given at #gnb */
width: 100%;
height: 800px;
background: pink;
}
<div class="container">
<header id="gnb">
<div class="header-area">
<a href="#">
<img src="somelogo" alt="">
</a>
<nav>
<ul>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
</ul>
</nav>
</div>
</header>
<main>
some text
</main>
<footer>
</footer>
</div>
I have a ul inside a div. I want to center it. Here is the fiddle
HTML
<div id="menu-top">
<div id="menu-container">
<div id="menu-mask">
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
CSS
body {
background-color: #000;
overflow: hidden;
}
#menu-top {
position: absolute;
display: block;
width: 100%;
height: 26px;
top: 0px;
z-index: 9;
}
#menu-container {
width: 840px;
margin: auto;
}
#menu-mask {
display: inline-block;
height: 26px;
margin: auto;
overflow: hidden;
position: relative;
top: 0;
width: 800px;
}
#menu {
position: absolute;
display: block;
left: 0px;
top: 0px;
height: 26px;
margin: auto;
padding: 0px;
width: 100%;
}
#menu li {
padding-right: 20px;
clear: none;
float: left;
display: inline;
}
#menu li a {
font-size: 12px;
line-height: 26px;
letter-spacing: 1.5px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
Here you go... change your #menu to this:
#menu {
position: absolute;
display: block;
margin-left:25%;
margin-right:25%;
margin-top:auto;
margin-bottom:auto;
top: 0px;
height: 26px;
padding: 0px;
width: 100%;
}
The margin-left and margin-right settings will center your menu on the page. I gave this a quick test in your JSFiddle to make sure it works.
Oh, and here's the updated JSFiddle showing the changes...
http://jsfiddle.net/LyJz9/7/
You can probably use text-align:center for what you are trying to do.
i have two buttons in menu on mouse over the button change image to another image but on mouse out it remains back to its original image what i want to do is to when i click this button it stat should be active so that one can know that which page he is visiting now.
my code is
#menu
{width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul { list-style: none;}
#menu li { display: inline;}
#menu a { float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover { width: 107px;
height: 28px;
}
#emailUs
{ display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
and the html code is
#menu
{
width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover {
width: 107px;
height: 28px;
}
#emailUs
{
display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
Note: my images are seperated images not a sprite image.
you can see the demo what i want to achieve (www.daniweb.com)
Send a varible from program which page you are on. And add a class active or inactive and css the class
for eg :
Home
My Account
Now give background-image for the class selected menu so only the home image will have the active background . If you are not using sprite then do like this
<li id="home">Home</li>
<li id="myaccount">My Account</li>
then call
#home .selectedmenu{
background-image:url('homeselected.png');
}
To send variable
<?php
$menuSelected ='home';
?>
Home