HI. I have looked through other posts, but nothing seems to help.
My site has a DropDown Menu. I used the example given, and changed the styling. It i working in FF, Chrome and Safari just fine, but of course IE it just displays as a list.
I only used the call
I have this in my body >>
[[Wayfinder? &config=`cssplay-dropdown` &startId=`0` ]]
I have this in my header >>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/dropdown.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/dropdown_ie.css" />
<![endif]-->
This is my dropdown.css>>
/* common styling */
.menu {
font-family: Helvetica, Arial, sans-serif;
width: 960px; /* the auto margins (in conjunction with a width) center the page */
position:relative;
margin:0;
z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:auto;
height:20px;
font-size: 13px;
text-align:left;
padding-right: 25px;
overflow:hidden;
margin:0;
padding:10px 14px;
background:#0F3528;
color:#ffffff;
text-decoration:none;
line-height:20px;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
margin-right:1px;
position:relative;
}
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#4B007D;}
.menu ul li:hover ul {display:block; position:absolute; top:40px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#0F3528; color:#fff;}
.menu ul li:hover ul li:hover a.hide {color:#ffffff; background:#0F3528;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#4B007D;
color:#fff;
font-size:12px;
padding-top:5px;
padding-bottom:0;
padding-left:5px;
padding-right:5px;
width:135px;}
.menu ul li:hover ul li a:hover {background: #0F3528; color:#ffffff;}
.menu ul li:hover ul li:hover ul {display:inline; position:absolute; left:180px; top:0; clear: left;}
.menu ul li:hover ul li:hover ul.left {left:-180px;}
This is my dropdown_ie.css
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#4B007D;}
.menu ul li a:hover ul {display:block; position:absolute; top:40px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#0F3528; color:#fff;}
.menu ul li a:hover ul li a {display:block; color:#ffffff; background:#0F3528;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {color:#ffffff; background:#0F3528;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#fff;}
.menu ul li a:hover ul li a:hover ul.left {left:-180px;}
I have done this is another website, and it is working fine in IE, FF, Chrome and Safari, so I am not sure what I am doing wrong.
Can anyone help? Please.....
Thanks in advance for your time.
Best,
L
