PDA

View Full Version : tabbed menu CSS only?????


tony09uk
02-22-2011, 10:16 PM
I want to create a tabbed menu (such as this http://www.sohtanaka.com/web-design/examples/tabs/ ) using only CSS, is it possible? I have seen a few tutorials that cover it but they include j query to achieve it, I am still learning CSS and am trying to get a more complete understanding of this language before I move onto something else. Can anyone help please?

DWcourse
02-23-2011, 12:11 AM
I think you'll find jQuery or a similar solution is necessary for getting tabs to work.

edbr
02-23-2011, 12:20 AM
http://www.cssplay.co.uk/menus/ is always worth a look.

dbepp
09-01-2011, 02:19 PM
I think you'll find jQuery or a similar solution is necessary for getting tabs to work.

I have an HTML / CSS menu that works fine in all browsers except for... IE.
It appears in the correct position, but when I roll over a drop down, such as our products page, it doesn't drop down to the sub menu in IE.. works well in all other browsers tested.

http://www.onlyfuzion.com/test_index.html

Is this what you mean when you say that jQuery or something similar is necessary for getting tabs to work?

Is there an IE hack for my issue? I thought I included it... What do you suggest?

Here's the css:

@charset "UTF-8";
#navMenu {
margin:0;
padding:0;
}
#navMenu {
margin:0;
width:auto;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#474747;
}

#navMenu ul li a {
text-align:center;
height:30px;
width:148px;
display:block;
color:#000;
font-family:"Tahoma, Geneva, sans-serif";
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}

#navMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}

/**********************************************/

/*sets top level hover color*/

#navMenu li:hover {
background:#09F;
}

/*sets link items hover color and background*/

#navMenu ul li:hover ul li a:hover {
color:#000;
background:#CCC;
}

/* Changes text color on hover for main menu hover*/

#navMenu a:hover {
color:#000;
}

/* Contains the Float */

.clearFloat {
clear:both;
margin:0;
padding:0;
}

/* IE7 Display Fix */

#navmenu #holder ul li {

display: inline;

}