My fly out menu hides behind an image on the web page.

HTML

/*   menu  */
/* common styling */
.menu {font-family: arial; font-size: 14px; width:200px;  position:relative; margin: 5px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; 
    width:170px; text-align:left; border:1px  solid #000; border-width:1px 1px 1px 1px; 
    background:#FF9933; line-height:30px; font-size:14px; font-weight: bold; padding:5px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:right; margin-right:25px; position:relative;}
.menu ul li ul {display: none;}


/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#CC3333;}
.menu ul li:hover ul {display:block; position:absolute;  top:0; left:150px; width:150px; 
    z-index:1;}
.menu ul li:hover ul li a.hide {background:#33CC66 ; color:#000;}
.menu ul li:hover ul li a {display:block; background:#33CC66 ; color:#000; width:150px; 
    padding: 2px;}
.menu ul li:hover ul li:hover a.hide {width:150px; }
.menu ul li:hover ul li a:hover {background:#33CCCC; color:#000;}
.menu ul li:hover ul li ul {display:none; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:140px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:175px; background:#FF99CC; color:#000;}
</style>

CSS

#content { 
    width:1000px; 
    height:900px;
    float: right; /* switch this to left and below to right to change the column locations */

    border: thick  solid #663300; /* remove this line to remove the border */
    background-image: url(images/32a.jpg);
    padding: 0;
    font-size: 16px;
    font-family: arial;
    overflow:hidden;

}


.picture .large { 
    display:none; 
 } 

.picture:hover .large { 
 display:block; 
 top: 200px; 
 right:50px;
 border:none;
 position:absolute;
 z-index: 1; 
} 

Thanks

Recommended Answers

All 9 Replies

Try placing a z-index on the inner UL.

.menu ul li:hover ul li:hover ul { z-index: 2; }

Thanks Dude!

I was facing the same problem. Now rectified. Thanks again!

Try placing a z-index on the inner UL.

.menu ul li:hover ul li:hover ul { z-index: 2; }

Didn't work. I was wondering if it is because I don't have a code for the small images. I have it so when you hover over the image a larger one appears.

Didn't work. I was wondering if it is because I don't have a code for the small images. I have it so when you hover over the image a larger one appears.

Could you post your entire page's code? Like, all the HTML and CSS? I'll take a look at it in 10-12 hours once I come home from work.

Could you post your entire page's code? Like, all the HTML and CSS? I'll take a look at it in 10-12 hours once I come home from work.

Thank you I really appreciate you taking time to help me. This is my 1st web page. I don't plan on putting it on the web. I was going to make disks for all the family.

CSS

html, body { 
    width: 1000px;
    height: 125%;
    margin:  0;
    padding: 0; 
    position:relative;
}

#container { 
    width:1075px; 
    height:1200px;
    margin: 20px 0px 0px 30px; 
    padding: 10px 20px 0px 100px;
    background-image: url(images/wheat.jpg);
    border: thick solid #006666;
}

h1 {
    text-align: center; 
    font-family: arial; 
    font-size: 40px; 
}

#content { 
    width:1000px; 
    height:900px;
    float: right; /* switch this to left and below to right to change the column locations */

    border: thick  solid #663300; /* remove this line to remove the border */
    background-image: url(images/32a.jpg);
    padding: 0;
    font-size: 16px;
    font-family: arial;
    overflow:hidden;
}

.picture .large { 
    display:none; 
 } 

.picture:hover .large { 
 display:block; 
 top: 200px; 
 right:50px;
 border:none;
 position:absolute;
 z-index: 1; 
} 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Menu</title>
 <style type="text/css">

/*   menu  */
/* common styling */
.menu {font-family: arial; font-size: 14px; width:200px;  position:relative; margin: 5px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; 
    width:170px; text-align:left; border:1px  solid #000; border-width:1px 1px 1px 1px; 
    background:#FF9933; line-height:30px; font-size:14px; font-weight: bold; padding:5px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:right; margin-right:25px; position:relative;}
.menu ul li ul {display: none;}


/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#CC3333;}
.menu ul li:hover ul {display:block; position:absolute;  top:0; left:150px; width:150px; 
    z-index:1;}
.menu ul li:hover ul li a.hide {background:#33CC66 ; color:#000;}
.menu ul li:hover ul li a {display:block; background:#33CC66 ; color:#000; width:150px; 
    padding: 2px;}
.menu ul li:hover ul li:hover a.hide {width:150px; }
.menu ul li:hover ul li a:hover {background:#33CCCC; color:#000;}
.menu ul li:hover ul li ul {display:none; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:140px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:175px; background:#FF99CC; color:#000;}


</style>

</head>

<body>


<!-- Site navigation menu -->
<div class="menu">


<ul>
        <li><a class="hide" href="peart_family_tree.html"target="_top">Peart Family Tree
                      &nbsp; &nbsp; &nbsp; &nbsp; 1699 - 1815</a> 
    <ul>     

            <li> <a href="isaac_peart_1699.html"target="_top"> Isaac Peart 
                &nbsp;&nbsp; &nbsp;1699-1774</a></li>
            <li> <a href="john_peart_1727.html"target="_top"> John Peart
                 &nbsp;&nbsp; &nbsp;1727-1798</a></li>
            <li> <a href="emerson_peart_1777.html"target="_top"> Emerson Peart 1777-1832</a></li>
            <li><a href="thomas_peart.html"target="_top">Thomas Peart 1804-1878</a></li>
            <li><a href="oneida_pioneer.html"target="_top">Oneida Pioneer 1917  </a></li>

    </ul>
</li>    
</ul>


<ul>
        <li><a class="hide" href="peart_family_tree.html"target="_top">Peart Family Tree
                           &nbsp; &nbsp; &nbsp; &nbsp;1816 - 1947</a> 
       <ul>
            <li><a href="emerson_peart_1844.html"target="_top">Emerson Peart 1844-1917</a></li>

            <li> <a href="the_pearts_1832.html"target="_top">Peart's 1832  </a></li>
            <li><a href="e_coatsworth_peart_1881.html"target="_top"> Emerson C Peart 1881-1964 </a></li>
            <li><a href="hewitt_1887.html"target="_top">Hewitt 1887 </a></li> 
            <li><a href="margaret_peart_1913.html"target="_top">Margaret Peart
                 &nbsp; &nbsp; &nbsp;1913-1990  </a></li>
            <li><a href="annie_peart_1916.html"target="_top">Annie Peart 1916-1916  </a></li>
            <li><a href="laura_peart_1917.html"target="_top">Laura Peart 1917-1957 </a></li>
            <li><a href="walter_peart_1918.html"target="_top">Walter Peart 1918-1996  </a></li>
            <li><a href="katie_peart_1921.html"target="_top">Katie Peart 
                &nbsp; &nbsp;1921-29</a></li>
            <li><a href="k_peart_1930-39.html"target="_top"><b><u>Katie Peart 
                &nbsp; &nbsp;1930-39 </u></b></a></li>  
            <li><a href="katie_1940-42.html"target="_top">Katie Peart 
                &nbsp; &nbsp;1940-42</a></li>
            <li><a href="katie_1943-46.html"target="_top">Katie Peart 
                &nbsp; &nbsp;1943-46</a></li>
            <li><a href="marion_peart.html"target="_top">Marion Peart
                &nbsp; &nbsp; 1925-1997  </a></li>


      </ul> 
    </li>


</ul>  


</div>
</body>
</html>

patuie,

You're almost there! :)

I realise this may be a private site, so if you don't feel comfortable sharing it with the entire forum, feel free to PM me. What I need is an EXACT copy of the site that you screen-printed and posted as an image. Without seeing the rest of the code, I can't really recognise where the problem is located.

patuie,

You're almost there! :)

I realise this may be a private site, so if you don't feel comfortable sharing it with the entire forum, feel free to PM me. What I need is an EXACT copy of the site that you screen-printed and posted as an image. Without seeing the rest of the code, I can't really recognise where the problem is located.

Is this what you wanted?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--DVID=00001DE9-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" media="all" type="text/css" href="css_6.css" />

<title>katie_peart_1930s</title>
</head>

<body>
<div id="container">
<div class="menu">
<iframe src="peart_menu.html" width="50%" height="70%" align="left" frameborder="0"
scrolling="no" style="position:absolute;left:50px;top:100px;"></iframe>
</div>

<h1>1930 -1939</h1>

<div id="content">
<p align="left"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


Eileen &amp; Katie
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Katie<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Katie Peart in grade 9, 1936<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Katie had a pen pal in Scotland,
Margaret Henderson<br />
<br /> <br /> <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Eileen 1930, Katies sister</p>

<div class="picture">
<a class="p1" href="."><img src="images/25.k_peart_1936_sm.jpg" style=
"position:absolute; top:150px;left:300px" border="0" alt="25.k_peart_1936" z-index="-1000" />
<img src="images/25.k_peart_1936.jpg" class="large" alt="25.k_peart_1936" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/26.e_k_peart_193--_sm.jpg" style=
"position:absolute; top:170px;left:600px" border="0" alt="26.e_k_peart_193--" />
<img src="images/26.e_k_peart_193--.jpg" class="large" alt=
"26.e_k_peart_193--" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/30.k_peart_sm.jpg" style=
"position:absolute; top:170px;left:920px" border="0" alt="30.k_peart" />
<img src="images/30.k_peart.jpg" class="large" alt="30.k_peart" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/27.e_peart_1930_sm.jpg" style=
"position:absolute; top:540px;left:320px" border="0" alt="27.e_peart_1930" />
<img src="images/27.e_peart_1930.jpg" class="large" alt="27.e_peart_1930" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/28.m_henderson_sm.jpg" style=
"position:absolute; top:550px;left:670px" border="0" alt="28.m_henderson " />
<img src="images/28.m_henderson.jpg" class="large" alt=
"28.m_henderson" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/29.m_henderson_sm.jpg" style=
"position:absolute; top:550px;left:920px" border="0" alt="29.m_henderson " />
<img src="images/29.m_henderson.jpg" class="large" alt=
"29.m_henderson " /></a>
</div>
</div>
</div>
</body>
</html>

Hey patuie,

I see you are online and I'm going to send you a private PM.

Hey patuie,

I see you are online and I'm going to send you a private PM.

Every thing works great
Thanks again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.