Forums
View unanswered posts | View active topics It is currently Sun Oct 26, 2014 3:30 am



Reply to topic  [ 3 posts ] 
 Drop down menu with drop shadow 
Author Message

Joined: Tue Dec 14, 2010 12:19 am
Posts: 2
Post Drop down menu with drop shadow
I'm trying to get a drop shadow effect on a drop down menu tool bar. Ive got everything working fine in chrome, but of course we all know Microsoft can't just make things easy for us.. right? Ive tried every combination of child/ancestor position: absolute and z-index: _ and nothing seems to work. Any ideas?

Thanks in advance!
-Jixz

Here is the URL where this is hosted at http://jixz.hopto.org/outletsoftware/sample.html
Here is the page comparison:
Image
Relevant CSS:
Code:
.menu {
width: 950px;
 padding:0 0 0 12px;
 margin:0 auto;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 list-style:none;
 height:36px;
 background:#fff url(images/button1a.gif) repeat-x;

 font-family:arial, verdana, sans-serif;
 -webkit-box-shadow: 2px 2px 9px #cacaca, -2px 2px 9px #cacaca;
 -moz-box-shadow: 2px 2px 9px #cacaca, -2px 2px 9px #cacaca;
box-shadow: 2px 2px 9px #cacaca, -2px 2px 9px #cacaca;
position:relative;
 behavior: url('PIE.htc');
z-index:200;
 }
 
.menu :hover ul.sub {
height:auto;

display:block;
position: absolute;
left:-1px;
top:35px;
right:2px;
background: #fff;
padding:0px 0;
border:0px solid #001100;
white-space:nowrap;
width:200px;
-webkit-box-shadow: -2px 2px 9px #cacaca, 2px 2px 9px #cacaca;
-moz-box-shadow: -2px 2px 9px #cacaca, 2px 2px 9px #cacaca;
box-shadow: -2px 2px 9px #cacaca, 2px 2px 9px #cacaca;
 -moz-border-radius: 1px;
 -webkit-border-radius: 1px;
 border-radius: 1px;

behavior: url('PIE.htc');
 }


 
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link { display:block; float:left; height:36px; line-height:33px; color:#000; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer; background: transparent url(images/vertical.gif) center right no-repeat;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



 

 
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#cacaca; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#42c555 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}


Relevant html:
Code:
   <div class="">
         <ul class="menu">
   
         <li class="top"><a href="av" target="_self" class="top_link"><span>Home</span></a></li>

         <li class="top"><a href="av" target="_self" class="top_link"><span>Antivirus</span></a>
            <ul class="sub">
               <li><a href="test" target="_self">AVG</a></li>
            </ul>
         </li>

         <li class="top"><a href="" target="_self" class="top_link"><span>Backup Software</span></a>
            <ul class="sub">
               <li><a href="test" target="_self">Carbonite</a></li>
               <li><a href="test" target="_self">Mozy</a></li>
            </ul>
         </li>
      </ul>

   </div>


Tue Dec 14, 2010 12:25 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Drop down menu with drop shadow
My guess is that your problem is due to specifying the behavior:url() property within a rule with a :hover selector. IE doesn't seem to apply behaviors when they're only added within :hover rules. Try pulling the behavior out into a separate rule:
Code:
.menu ul.sub {
  behavior: url(PIE.htc);
}


Tue Dec 14, 2010 9:59 am
Profile

Joined: Tue Dec 14, 2010 12:19 am
Posts: 2
Post Re: Drop down menu with drop shadow
:shock: your a god..

Thanks! :D


Tue Dec 14, 2010 3:22 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Bing [Bot] and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.