I’m coding a new site for the company. One of the elements I’m working on is a drop down hover menu. The menu will contain a list of links to Facebooks for the various offices and divisions within the company. The Facebook icon will be visible and what is hovered over to display the menu.
I’m having trouble getting it to appear on the page correctly based upon different screen resolutions. The site is 1000px wide and full screen high. The page centers in the browser window horizontally.
I have been using Dreamweaver to code the site and placed the menu where I wanted it based upon the current resolution of 1280X1024. Dreamweaver setup the CSS to use absolute positioning. This looked great until I switched screen resolution and found that at lower resolution, the menu is off screen and I’m forced to scroll to the right to find it.
I then tried relative positioning and the menu appeared in the correct position regardless of the resolution. I became happy until I moused over and saw the page elements below the hover menu move down to allow the menu to display. I have not seen this before and wonder why this is happening.
How do I get the menu to work with relative positioning and display above other page elements?
CODE:
<style type=“text/css”>
#cssm1 * { padding:0; margin: 0; }
#cssm1 {
position: relative;
z-index: 99;
margin: 0 auto;
float: left;
line-height: 20px;
left: -80px;
top: 0px;
}
#cssm1 a { display: block; text-decoration: underline; }
#cssm1 a:hover { }
#cssm1 ul li, #cssm1 ul li ul li { width: 150px; list-style-type:none; }
#cssm1 ul li { float: left; width: 20px; background-color:#D1C2AB;}
#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 150px;
background-color:#CCC;
}
#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
display:block;
background-color:#CCC;
}
#cssm1:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 120px;
margin-top: -20px;
}
</style>
<div id=“cssm1”>
<ul >
<li>
<img src="images/facebook_icon topsite.jpg" border=0/>
<ul>
<li>
<span class="arial10pt">Amazing God</span><br />
<span class="arial10pt">Catholic Cemeteries</span><br />
<span class="arial10pt">Catholic Charities</span><br />
<span class="arial10pt">Catholic Schools</span><br />
<a href="http://facebook.com/evangelist.albany" target="_blank"><span class="arial10pt">Evangelist Newspaper</span></a>
<span class="arial10pt">Stewardship Office</span><br />
</li>
</ul>
</li>
</ul>
</div>