Hover drop down menu

Get Started
1

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 >

	&lt;li&gt;
	  &lt;img src="images/facebook_icon topsite.jpg" border=0/&gt;
	  &lt;ul&gt;
	    &lt;li&gt;
            	&lt;span class="arial10pt"&gt;Amazing God&lt;/span&gt;&lt;br /&gt;

	&lt;span class="arial10pt"&gt;Catholic Cemeteries&lt;/span&gt;&lt;br /&gt;
                &lt;span class="arial10pt"&gt;Catholic Charities&lt;/span&gt;&lt;br /&gt;
               &lt;span class="arial10pt"&gt;Catholic Schools&lt;/span&gt;&lt;br /&gt;
                &lt;a href="http://facebook.com/evangelist.albany" target="_blank"&gt;&lt;span class="arial10pt"&gt;Evangelist Newspaper&lt;/span&gt;&lt;/a&gt;
                &lt;span class="arial10pt"&gt;Stewardship Office&lt;/span&gt;&lt;br /&gt;

            &lt;/li&gt;
		&lt;/ul&gt;
	
	&lt;/li&gt;
	
&lt;/ul&gt;

</div>

2

  1. What’s with the DIV around it for nothing? UL’s a perfectly good block level container.

  2. what’s with all the spans and pointless redundant classes? That looks like it should be a sub-list.

I’m having trouble figuring out what you’re even aiming for on appearance, though I suspect you’ve got anywhere from 30% to 50% more markup and CSS than necessary. The presence of deprecated elements (like border and target), what may be a presentational image (in which case it has no business in the HTML), and presentational class names (arial10pt) are all telltales of decade out of date coding methodologies.

3

  1. I found an example online and modified it. The div is there because it was there in the example. I can move the ID over to the UL and remove the div.

  2. Again I modified an example from the web that’s where the excess css came from.

What I was trying to do:
I have an image on the page, the facebook logo, and a drop down menu that should appear when the logo is hovered over and disappear when the logo is not hovered over. The menu contains a simple list of clickable links that open in another window.

The code as I showed it was what I got from the example I found online and modified. For the purposes of functioning as a Facebook logo with a hover menu, it worked fine. The problem was that I could not get it to appear on the same place in the page regardless of screen resolution.

CSS Absolute position forced the image & menu to appear in different locations of the page for varying screen resolutions. using relative positioning fixed the location issue, but forced elements on the page to move when the menu displayed.

Does this make sense? I hate dropdown menus because I hardly ever use them and always have trouble getting them to function aas needed.

4

See http://www.felgall.com/cshow29.htm for the minimum markup required to get a drop down menu to function correctly when the mouse hovers over the menu.

5

Thanks for the code example. Unfortunatly it didn’t work for me. I got the facebook icon to display but there was a nasty looking black box behind the icon. When I moused over the icon, nothing happened.

I’m not looking to rewrite the menu, I just need someone to explain to me how to get the submenu to display above the elements on the page and not push page elements down to make room for the menu.

6

I’ve been researching the issue and have found what I think is the problem: z-index.

I’ve included a few pictures for your review
http://204.168.24.174/no_mouseover.jpg
http://204.168.24.174/mouseover.jpg

The menu’s code resides in the right most cell of the table. when i mouse over the facebook icon, the table cell’s height grows to accomodate the new menu. How do I get the menu to appear over the table?

I tried modifying the CSS to give the table that the facebook icon is within a z-index of 1. Doing so caused only the table to grow, the menubar and the large pictures stayed the in same the same place.

#title_table{
position:absolute;
z-index: 1;
}

I’ve even tried this in FF and it behaves the same way. At least the browsers are consistent.

#top-table{

}

7

I noticed that when I gave a z-index to the table, it was resizing above the other elements on the page. That got me thinking.

I added a blank row under the row containing the site name and set the rowspan of the right most cell (the one with the menu) to 3. I then sized the new blank row so the right most cell was large enough to accommodate the menu. Now the menu appears in the cell and does not expand the cell because the cell is large enough to accommodate the menu. The cool thing is that the table appears above other page elements. This is not a best practice by far, but it works for me. I just hope FF & IE do not change how they implement this stuff in future releases.

8

Since the table now resides above the meunbar, the menubar is no longer clickable. I’m giving up, throwing out the menu and starting over

9

I’d be approaching that a bit different. First order of business is to clean up the code – if there’s only one item that’s not a list – doesn’t look like from your screencap you’d be adding more parent items so I’d lose the outermost list entirely keeping the div. (if there were to be multiple dropdowns I’d go with the list and lose the div)… also I’m assuming ALL of those are going to be anchors – so get them in anchors NOW getting rid of all of those “span for nothing”.


<div id="faceBookMenu">
	Find Our Facebook Pages
	<ul>
		<li>
			<a href="#">
				Amazing God
			</a>
		</li><li>
			<a href="#">
				Catholic Cemeteries
			</a>
		</li><li>
			<a href="#">
				Catholic Charities
			</a>
		</li><li>
			<a href="#">
				Catholic Schools
			</a>
		</li><li>
			<a href="http://facebook.com/evangelist.albany">
				Evangelist Newspaper
			</a>
		</li><li>
			<a href="#">
				Stewardship Office
			</a>
		</li>
	</ul>
</div>

For the following CSS:


#faceBookMenu {
	overflow:hidden;
	position:relative; /* to APo the sub-menu */
	zoom:1; /* trip haslayout, fix IE positioning bugs */
	padding:32px 40px 0 0;
	text-align:right;
	/* thanks to image interaction we can't do %/EM reliably */
	font:normal 14px/16px arial,helvetica,sans-serif;
	background:url(images/faceBookIcon.png) bottom right no-repeat;
	/*
		note we don't have to say height
		32px top padding + 16 px line-height == 48px
	*/
}

#faceBookMenu:hover {
	overflow:visible;
}

#faceBookMenu ul {
	list-style:none;
	position:absolute;
	top:48px;
	right:0;
	background:#666; /* or whatever you're using there */
}

#faceBookMenu li {
	display:inline; /* prevent these from causing layout problems */
}

#faceBookMenu a {
	display:block;
}

Using the overflow state to hide/show the dropdown is generally a lot smoother than screwing around with display:none or sliding it around with margin or positioning. The above is untested and you may need to fix the width of the UL for legacy IE – but the concept is sound.

10

Your revised code works and I am extremely happy. How did you learn to code the dropdown menu? Trial an error? Reading a book? An online tutorial? I’d love to learn this stuff rather than having to rely on modifying the code someone supplies.

It’s like this: Give a man some code to modify and he finishes the current project. Give him the knowledge to create code and he finishes all projects.

11

IE vs Firefox.

The menu in IE loads just below the div area so that when it shows it is almost touching the bottom of the Facebook icon.

The menu in FF loads with a bit of a gap below the div area so that when it shows it is not that close to the bottom of the Facebook icon. This forces the site viewer to move the mouse over the gap quickly before the menu disappears.

Is there either a way to standardize the gap or to increase the time before hiding the menu?

12

#faceBookMenu ul {
list-style:none;
position:absolute;
top:53px;
right:1px;
background:#D1C2AB; /* or whatever you’re using there */
width: 149px;
height: 108px;
margin-top:0px; <— removes the gap and standardizes it in both browsers.

}

13

When I provided the link I was thinking more along the lines of showing you what CSS is required to get the menu to work so you can see what parts of your existing code are necessary and what you could try getting rid of. Not necessarily that you’d switch the code completely.Apart from the borders around each of the entries in those examples every other piece of the CSS is needed in order for the drop down menu to function. So anything else in your CSS would be there for a different purpose than to get the dropdown to work.