Hi all. I'm having some issues with Horizontal menu's but the problem is IE6.
I am working on a site at [url="http://www.myriadlingerie.com/mcompany/index.asp"]
This is not the homepage of it but the homepage is using a different menu script.
So anyway I posted the CSS for the menu below so you guys can see it if you want. It's kind of a mess and I do apologize for that but I've gotten to the point where I'm just trying random things. It originally started out from:
http://www.cssplay.co.uk/menus/basic_dd.html.
The basic design works fine in IE6. Then I started editing it to make it fit into the site I'm working on an now it's just all over the place and not functioning properly in IE6. Also need to find a work around to make sure the menu's that display in IE6 actually go over the select box on the page. z-index doesn't work apparently to well in IE6 so I know I'm going to need to find a work around for that as well.
So anyway please if you have any suggestions, hints or maybe know what's wrong let me know. This one has got me pretty well
/* ================================================== ==============
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
/* remove the bullets, padding and margins from the lists */
.menud ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menud li{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menud table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style all the links */
.menud a, .menud :visited {
display:block;
font-size:10px;
font-size: 98%;
color: #000000;
font-weight: none;
text-decoration: none;
padding:7px 8px 7px 8px;
color:#000;
text-decoration:none;
margin-right:1px;
}
.menud ul li {
border-width: 0px;
border-left-width: 2px;
border-color: #653076;
border-style: solid;
z-index: 255;
text-align:center;
background-image: url(http://www.myriadlingerie.com/images/indent1.gif);
}
/* style the links hover */
.menud ul li:hover{
background-image: url(http://www.myriadlingerie.com/images/indent2.gif);
}
/* hide the sub level links */
.menud ul ul {
visibility:hidden;
position:absolute;
width:249px;
border: 0px;
height:0;
}
.menud ul ul li {
margin-left: -4px;
width: 225px;
float: left;
padding-left: 26px;
text-align: left;
background-image: url(http://www.myriadlingerie.com/images/menuhlback2.gif)
}
.menud ul ul li:hover {
width: 225px;
background-image: url(http://www.myriadlingerie.com/images/hovermenu2.gif)
}
.menud ul li ul {
height: auto;
margin-left: -8px;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
/* make the sub level visible on hover list or link */
.menud ul li:hover ul,
.menud ul a:hover ul{
visibility:visible;
width: 250px;
font-size: 98%;
color: #000000;
font-weight: none;
text-decoration: none;
background-image: url(http://www.myriadlingerie.com/images/hovermenu2.gif);
}
Linear Mode
