On the site I'm currently working on there is a nested unordered list in the sidebar, when an <li> from this list is hovered over, it shows the (previously hidden) child <ul>. This is working fine in all browsers except IE 7+6. In these browsers the popup <ul> displays beneath the <li>'s of the list above. Any idea why it would be doing this?
My CSS is as follows:
div#sidebar-products {
border-bottom: 3px solid #D31245;
height: 297px;
}
div#sidebar-products h2 {
font-size: 1.5em;
border-bottom: 0;
padding: 5px 0 12px 0;
color: #D31245;
}
div#sidebar-products ul{
z-index: 0;
}
div#sidebar-products li{
position: relative;
}
div#sidebar-products ul li a,
div#sidebar-products ul li a:visited
{
display: block;
border-bottom: 1px solid #eeeeee;
text-decoration: none;
padding: 7px 10px 7px 20px;
color: #6b6869;
background: #fff url(/img/raquo-red.png) 7px center no-repeat;
}
div#sidebar-products li a:hover,
div#sidebar-products li a:focus,
div#content-holder div#sidebar-products li.active a
{
background-image: url(/img/raquo-white-red.png);
background-color: #D31245;
color: #fff;
}
div#sidebar-products ul ul{
display: none;
padding-left: 10px;
position: absolute;
margin-top: -1px;
z-index: 9999 !important;
border: 1px solid #D31245;
background: #f3f3f3;
width: 247px;
}
div#sidebar-products ul li ul li {
margin-bottom: 0;
position: static !important;
z-index: 500;
}
div#site-holder div#content-holder div#sidebar-products ul ul li a {
background: #fff url(/img/raquo-red.png) 10px center no-repeat;
padding-left: 24px;
color: #949494;
}
div#site-holder div#content-holder div#sidebar-products ul li ul li a:hover,
div#site-holder div#content-holder div#sidebar-products ul li ul li a:focus
{
color: #D31245;
background-color: #fff;
}
I reckon you have probably encountered the bug that IE doesn't treat z-indexes on a document level, but on a container level. I forget the exact bug details it is usually fixed by adding/removing position: relative to the shared ancestor element I believe.
Try these for some more details:
http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
I think you need to make sure you parent element is position relative, with overflow of auto
THere's a good article on smashing magazine.
It might help you: The Z-Index CSS Property: A Comprehensive Look
Related
I am trying to vertically stack a sub-menu, however, I am having trouble getting it to stack possibly due to some of the parent styling. The goal is for the sub-menu to stack vertically underneath the very first link. Any advice?
JSFIDDLE
CSS
nav {
height: 70px;
background: transparent;
}
nav ul {
display: inline-block;
list-style: none;
height: 70px;
float:right;
}
nav ul li {
display: inline-block;
background: transparent;
float: left;
padding: 0px 10px;
padding-top: 23px;
height: 43px;
border-top: 4px solid $White;
}
nav ul li:first-child {
border-top: 4px solid $White;
}
nav ul li a {
font-family: 'Lato', serif;
font-size: 14px;
color: $TextColor;
line-height: 122%;
letter-spacing: 1.5px;
padding-left: 0;
}
nav ul ul {
display: block;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
display: block;
}
Man, you really need to learn what you are doing. It was quite some effort to correct your code. For a start, you seem to be unaware of the fact that
nav ul { ... }
will not only affect your outer <ul>, but also your inner <ul id="submenu">.
The fact that you use id="submenu" strongly suggests that the next thing you might be unaware of is that per HTML document, any given id value must be unique, that is it can only be used on one element.
https://jsfiddle.net/gmtugks5/2/
I'm trying to center my dropdown menu without it affecting the functions of the menu. Any help is much appreciated! Thanks!
#menu_container { padding: 1px 0; border-bottom: 1px solid #FFF; }
#menu_container ul { list-style-type: none; }
#menu_container ul li { float: left; font-size: 12px; position: relative; }
#menu_container ul li a { display: block; padding: 5px 15px; color: #808080; text-decoration: none; }
#menu_container ul li a:hover { background-color: #333; color: #808080; }
#menu_container ul li ul { display: none; position: absolute; top: 25px; left: 0; z-index: 150; border: 1px solid #ddd; }
#menu_container ul li ul li { width: 310px; float: none; }
#menu_container ul li ul li a { background-color: #fff; }
It depends on your layout and page structure. It might be as simple as assigning #menu_container a fixed-width and automatic margins:
#menu_container { width: 640px; margin: 0 auto; padding: 1px 0; border-bottom: 1px solid #FFF; }
/* Depending on your layout, you may also need to assign a full-width and/or relative positioning to a parent/container/wrapper element */
You could set the #menu_container element to center by adding
margin:0px auto;
In order for that to work, you will also have to set a width for the container.
I'm using a CSS navbar that has drop down menus. I had a problem with scaling on my site, but some helpful users here helped me fix it. The solution they gave me was to change the position attribute to absolute.
This works fine for text boxes and images, but changing the navbar code to absolute breaks it and makes some of the buttons go to a second line.
Is there a way to stop this from happening and also stop the navbar from bugging out when the page is resized? Sorry if this is hard to understand. This is my navbar CSS, the HTML is just a list:
Jsfiddle: http://jsfiddle.net/qN8sm/embedded/result/
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 150;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
What you could try is set min-width:(amount of pixels)px. This sets the minimum width for an element, but if unless you set a max-width, it can upscale.
I am using jmenu.js and setting child menu elements to have transparency. Problem is that the child elements with transparency show the parent's (i.e. main menu bar) background. What I want is have transparency on the child menus which show through to the page background. The CSS is:
.jMenu {
display: table;
margin: 0 0 0 50px;
padding: 0;
}
/* First level */
.jMenu li {
display: table-cell;
background: url('../images/tile_gray.png');
margin: 0;
}
.jMenu li a {
padding: 10px;
padding-right:55px;
display: block;
background-color: transparent;
color: white;
text-transform: uppercase;
margin-top:2px;
cursor: pointer;
font-size: 14px;
font-family: Myriad Pro, Lucida Sans, Segoe UI, Calibri, sans serif;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
/* Lower levels */
.jMenu li ul {
display: none;
position: absolute;
z-index:9999;
padding: 0;
margin: 0;
}
.jMenu li ul li {
background-color: #fff;
display: block;
padding: 0;
}
.jMenu li ul li.arrow {
background: url('../images/tile_pink.png');
padding: 0;
border-bottom: none;
padding-bottom: 5px;
margin-top: 10px;
}
.jMenu li ul li a {
font-size: 13px;
text-shadow: 0px 0px 0px rgba(0,0,0,0);
text-transform: none;
padding: 7px;
display: block;
border-top: 1px solid transparent;
text-decoration: none;
}
.tran {
background: rgba(120, 120, 120, .2);
}
.jMenu li ul li a.isParent {
background: url('../images/tile_darker.png');
}
.jMenu li ul li a:hover {
background: url('../images/tile_green.png');
}
UPDATED
I changed the css to have the background transparent not on the anchor but on the li:
.jMenu li ul li {
background-color: #fff;
display: block;
background: rgba(0, 0, 0, .4);
padding: 0;
}
It looks like you have a background image on all .jMenu li. Even though you think you are just applying this background ('.../images/tile_gray.png') to only the first level, it is leaking down into the inner <li>'s
Try adding background-image: none; to your child li:
.jMenu li ul li {
background-color: #fff;
background-image: none;
display: block;
padding: 0;
}
This might work but it is hard to tell what exactly is going on without seeing it in action and without your HTML.
I posted this question over wordpress.stackexchange.com but they closed it and pointed me to post here.
I am not sure whether it is the right place for such question but I did not find any CSS related section here.
Please see the below image.
Currently my menus are similar to A but I want it to be like B. I also want to change the color of the separator from Black to Green in sub menu. I want this effect only on the sub menu whether sub menu page is selected or not. How can I do that?
Here is the selected code from my style.css:
.menu {
font: normal 13px Arial, sans-serif;
background: url() repeat-x 0 -80px;
width: 100%;
height: 35px;
position: relative; /* Required for positioning of sub-menus */
}
.menu li ul {
display: none; /* Required to hide menu when inactive */
position: absolute; /* Position the menu below and to the far left */
top: 50px;
left: 0;
}
/* This is the rule that displays sub-menus when a parent link is clicked */
.menu li.current-menu-parent ul, .menu li.current-menu-item ul {
display: block;
}
.menu li {
float: left;
margin: 0;
padding: 0;
font-weight: bold;
border-right:#3c3c3c solid 1px;
}
.menu li a {
float: left;
display: block;
color: #fff;
background: url() repeat-x 100% 0;
padding: 12px 25px;
text-decoration: none;
}
.menu li a:hover {
background-position: 100% -160px;
color: #fff;
}
/* Styling for current parent item */
.menu li.current-menu-item a, .menu li.current-menu-parent a{
background: url() repeat-x scroll left bottom #83C839;
}
/* Styling for sub-menus */
.menu li ul {
width: 805px;
background: url() repeat-x 0 -120px;
border: 1px solid #83C839;
border-style: none none solid;
border-width: 3px;
}
.menu li ul li {
padding: 6px 0;
}
.menu li.current-menu-item ul li a, .menu li.current-menu-parent ul li a {
background: url() repeat-y right center;
color: #666666;
padding: 12px 25px;
margin: -6px 0;
}
.menu li ul li a:hover {
color: #000;
}
/* Styling for current page sub-menu links */
.menu li.current-menu-parent ul li.current-menu-item a, .menu li.current-menu-parent ul li.current-menu-item a:hover {
background: url("") repeat-x scroll left bottom #83C839;
color: #FFFFFF;
}
I am using this code in Wordpress Theme. My code is based upon WordPress Tutorial – Current & Parent Menu Items In Custom Menus code, I modified it according to my need.