HTML CSS Drop down hover behind object |
HTML CSS Drop down hover behind object |
Esco1122 |
Jul 8 2011, 09:50 AM
Post
#1
|
Novice Group: Members Posts: 26 Joined: 2-March 11 Member No.: 14,023 |
Hi Guys,
I wonder if anyone can help me here, I have a CSS drop down menu and have an object embedded in my webpage. the problem I'm having is that for some reason the CSS menu does not hover over the object but behind it. Any help or solutions? Thanks in advance. Sukh. Here is my code CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>testpage</title> <style type="text/css"> p.first{color:Black;font-size:14px;font-family:verdana;} p.second{color:Black;font-size:12px;font-family:verdana;} #menu {width:800px; height:36px; text-align:left; background-color:grey; position:relative; left:10%; } #navMenu { width:100%; margin: 0 100px auto;; padding:0; } #navMenu ul { margin:0; padding:0; line-height:26px; } #navMenu li { margin-top:3px; padding:0; list-style:none; float:left; position:relative; } #navMenu ul li a{ text-align:center; font: bold 14px/24px verdana; text-decoration:none; height:26px; width:148px; display:block; color:white; border: 1px solid transparent; } #navMenu ul ul { position:absolute; visibility:hidden; } #navMenu ul li:hover ul { visibility:visible; background:#EAEBD8; } #navMenu li:hover{ background:#3F6A8D; } #navMenu ul li:hover a{ border:1px solid lightgrey; color:white; } #navMenu ul li:hover ul a{color:black; text-align:left;} #navMenu ul li:hover ul a:hover { background:#3F6A8D; color:white; } #page { border:1px solid lightgrey; width:1000px; margin:0 auto; padding:5px; text-align:left; } #header { border:1px solid transparent; border-bottom:1px solid black; width:798px; height:80px; background-color:lightgrey; position:relative; left:10%; } #content { border:2px solid black; width:998px; min-height:500px; _height:500px } </style> </head> <body> <!-- This section is where the page begins--> <div id="page"> <!-- This is where the header begins--> <div id="header"></div> <!-- This is where the navigation menu begins--> <div id="menu"> <div id="navMenu"> <ul> <li><a href="#" >111</a></li> <li><a href="#" >222</a> <ul> <li><a href="#" >AAA</a></li> <li><a href="#" >BBB</a></li> </ul> </li> <li><a href="#" >333</a> <ul> <li><a href="#" >CCC</a></li> <li><a href="#" >DDD</a></li> <li><a href="#" >EEE</a></li> </ul> </li> <li><a href="#" >444</a></li> </ul> </div> </div> <!-- This is where the navigation menu ends--> <!-- This is the starter note used to describe the page contents--> <!-- This main page contents start here--> <div id="content"> <object type="text/html" data="http://www.google.co.uk/webhp?sourceid=navclient&hl=en-GB&ie=UTF-8" width="990" height="700";> <p><a href="http://www.google.co.uk/webhp?sourceid=navclient&hl=en-GB&ie=UTF-8" >Floorplans Map</a></p> </object> <!-- The content ends here--> </div> <!-- The page ends here --> </div> </body> </html> |
Esco1122 |
Jul 8 2011, 10:22 AM
Post
#2
|
Novice Group: Members Posts: 26 Joined: 2-March 11 Member No.: 14,023 |
Just to add guys, this seems to be happening in IE only it seems.
Thanks |
Lo-Fi Version | Time is now: 26th April 2024 - 02:28 PM |