The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> HTML CSS Drop down hover behind object
Esco1122
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Esco1122
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 09:31 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC