I have a drop down menu bar. But it is always behind my content no matter how high I set the z-index of the bar or if I set the z-index of my content to -1. Can anybody help?
I did set the z-index to 500 where I do the hover of my navigation top menu but no change. Could it be because of the reset code I use in the beginning of my CSS code?
Here is my CSS Code:
/*navigation.xhtml; author: Mica */
#navigation {
float:left;
width:100%;
height:18px;
margin:15px 0 25px;
}
#navigation ul {
list-style-type:none;
list-style-image:none;
padding:0px;
float:left;
width: 100%;
}
#navigation li.topmenu {
float:left;
width:170px;
}
.topmenu a {
float:left;
width:100%;
text-align:center;
}
.topmenu ul {
float:left;
display:none;
width:100%;
}
.topmenu a, .submenu a, .topmenu:hover .submenu a {
padding:3px 0;
border:1px solid #C27000;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:#FF8C00;
margin:0;
font-weight:bold;
}
.submenu a{
width:100%;
clear:both;
postition:absolute;
}
#navigation a:hover, .topmenu.on a, .topmenu:hover a {
background-color:#FFA500;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
#logo a:hover {
opacity:0.8;
}
/*content in basicTemplate.xhtml; author: Mica */
#content {
float:left;
min-height:200px;
margin:0 7px;
}
HAHAAA found it!
z-index only works when a position is declared first: so I need to set in this block a position:
.topmenu:hover ul {
display:block;
z-index:500;
}
Like here:
.topmenu:hover ul {
display:block;
position:relative;
z-index:500;
}
Related
I want to put the logo in-between the navigation menus but I can't figure out how to do it in the theme that I have because I'm having trouble finding it in the backend. I'm sure it's just a matter of reordering something or adding a margin and a space for the photo... Under the header section of the CSS this is the code:
#header { padding:0 20px;margin-bottom:8px;}
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation { float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:block; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:block; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:block; padding:0; }
#navigation li:hover ul { display:block; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left:0; display:none; }
I suppose u are using wordpress theme ? If so, each li has its own classes. So you should create one "empty" menu, and add it as background of that link, you can make link to be home page. Text you can hide with text-indent:-9999px;
If u have exact link, i can be more helpful, check how i pulled it out here: http://itsgoran.com/cider
Update:
code should be like this:
li#menu-item-15 {
background-image: url(http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/SHEISBIDDYmainlogoandslogan1.png);
width: 470px;
height: 130px;
background-repeat: no-repeat;
text-indent: -9999px;
}
but i suggest firstly to create smaller logo image, then use that image for this, and ofcourse add smaller width and height which would be width/height of that smaller image.
I have a problem about the image overlap the dropdown menu that I can't hover.
The image I use -webkit-animation. When it rotate to the menu the dropdown will disable.
How can I let the rotate image doesn't effect the dropdown menu work.
I tried z-index and the image layer was lower than menu but dropdown menu still didn't work when mouse hover the gray image.I want the menu right to use. Any solution?
Please help.
Here is my code & Fiddle http://jsfiddle.net/bNBp3/130/
ul#main-navigation {
display:block;
border-bottom:1px solid #ccc;
margin:0 auto 0px auto;
min-height:21px;
padding:0;
width:100%;
clear:both;
}
ul#main-navigation li {
display:block;
float:left;
list-style:none;
margin:0 5px 0 0;
padding:0;
position:relative;
min-height:22px;
min-width:30%;
}
ul#main-navigation li a {
color:#000;
display:block;
padding:2px;
text-decoration:none;
}
ul#main-navigation li a.current, ul#main-navigation li a.section {
color:#fff;
}
ul#main-navigation li ul {
background:#eee;
position:absolute;
left:-1px;
top:21px;
display:none;
overflow:hidden;
padding:0px;
z-index:5;
width:100%;
border:1px solid #ccc;
}
ul#main-navigation li ul li {
display:block;
float:none;
margin:0;
width:100%;
border-bottom:1px solid #ccc;
}
ul#main-navigation li ul li a {
background:#eee;
display:block;
color:#333;
zoom:100%;
}
ul#main-navigation li ul li a:hover {
background:#fff;
}
ul#main-navigation li:hover {
background:#eee;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
ul#main-navigation li:hover a.current {
background:#eee; color:#000;
}
ul#main-navigation li:hover ul {
display:block;
}
div#mcake{
display:block;
overflow: hidden;
background-color:#ccc;
background-repeat: no-repeat;
position:absolute;
left:200px;
left:-250px\9;
top:10px;
top:100px\9;
width:200px;
height:200px;
-webkit-animation:airplane-wiggle 30s ease infinite;
}
#-webkit-keyframes airplane-wiggle
{
from{-webkit-transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);}
50%{-webkit-transform:rotateX(-40deg) rotateY(-5deg) rotateZ(-10deg);}
to{-webkit-transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);}
}
maybe you could give the image a: z-index: -10; (or something like that) in your css.
I dont know if this will work but its worth the try.
I think the standard z-index is 0 so now your image and menu are on the same "layer". i think putting it on -10 will work
you could use margin-top in mcake to push the image down
div#mcake{
margin-top: 100px;
display:block;
overflow: hidden;
background-color:#ccc;
background-repeat: no-repeat;
position:absolute;
left:200px;
left:-250px\9;
...
}
I think the z-index would resolve your problem , along with this you should add the below code in your css section for this to be working in all browsers,
add animation:airplane-wiggle 30s ease infinite; in div#mcake.
div#mcake{
.......
........
....
-webkit-animation:airplane-wiggle 30s ease infinite;
animation:airplane-wiggle 30s ease infinite;
}
and #keyframes
#keyframes airplane-wiggle
{
from{transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);}
50%{transform:rotateX(-40deg) rotateY(-5deg) rotateZ(-10deg);}
to{transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);}
}
I am playing around with CSS and so far I'am trying to make a website. I making a navigation bar and it's going down so it's horizontal. I need it to go across and I also need like 1 grey line to separate the tabs out. This is what I got so far.
HTML:
<div class="horizontal">
<ul>
<li>Home</li>
<li>Register</li>
<li>Rules</li>
</ul>
</div>
CSS:
div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
So again this goes downwards , i need it to go to the side and just have like a single line which separate every tab out.
div.horizontal
{
width:809px;
height:63px;
position:relative;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
display: inline-block;
margin-left:5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
display: inline;
color:#FFFFFF;
background-color:#000000;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
Working fiddle:
http://jsfiddle.net/EpPSv/10/
#nav
{
border-style:solid;
width:500px;
height:20px;
margin-top:200px;
margin-left:auto;
margin-right:auto;
}
#nav ul
{
list-style-type:none;
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
}
#nav li
{
display:inline;
}
#nav a
{
float:left;
display:block;
border-style:solid;
padding-left:5px;
padding-right:5px;
margin-top:-19px;
}
I just can't get it to center inside the div with the id "nav". Any help on what I am doing wrong? I am sort of new in this field, so any advice on how to make good css layouts would be appreciated!
I think this should do the trick:
#nav {
text-align: center;
}
#nav ul {
margin: 0 auto;
text-align: left;
}
hello
what i am trying to is to create a sub menu from a sub menu. for example if a user hovers over Actions this then drops to show say billing - mail etc. i would like to create another sub if a user hovers over billing. i have attached the code i am using which is stu nicholls pro dropdown. thanks
menu css
.nav {
height:35px;
background: url(images/pro_line_0.gif) repeat-x;
margin-top:100px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:500;
}
.nav .table {
display:table;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
padding:0 5px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a {
display:block;
height:35px;
float:left;
background: url(images/pro_line_2.gif);
padding:0 0 0 10px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a b {
display:block;
padding:0 30px 0 15px;
background:url(images/pro_line_2.gif) right top;
}
.nav .select a:hover,
.nav .select li:hover a {
padding:0 0 0 15px;
cursor:pointer;
color:#088;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 5px 0 15px;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#f00;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(images/back_0.gif);*/
padding:0;
z-index:100;
left:0px;
text-align:left;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 5px 0 30px;
margin:0;
white-space:nowrap;
border:0;
color:#444;
}
.nav .current .sub li.sub_show a {
color:#088;
cursor:default;
/*background:url(images/back_1.gif);*/
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
font-weight:bold;
/*background:url(images/back_1.gif);*/
}
sample html
<ul class="select"><li><a href="#nogo"><b>Control Panel</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li>Tickets</li>
<li>Messages</li>
<li>Actions</li>
<li>History</li>
<li>Settings</li>
<li>Destruction</li>
<li>Contacts</li>
<li>Users</li>
<li>Companies</li>
</ul>
</div>
Try using nested <ul>s in your HTML. That is, build your menu like so:
<ul class="menu">
<li>
<a>My Link</a>
<ul class="submenu">
<li><a>My Nested Link</a></li>
</li>
</ul>
Then use a simple Javascript solution like Superfish (or one of your chosing)
http://users.tpg.com.au/j_birch/plugins/superfish/