View Full Version : having trouble adding dropdown menus

Jan 22nd, 2009, 09:47 PM
hi all,
I'm working on my new site and I've tried to understand the son of suckerfish menus. I would like to keep my existing format, but add a dropdown under one or more of the menu items. When I try to combine the two I lose all of my positioning and formatting. a sample page is at mstevensphoto.com/headshots/folio.htm

my navigation css is:

ul#topnav { margin: 25px 0 0 0; height: 20px; float: right; width: 400px; padding: 0px 0px 5px 0px; list-style: none;text-align: right; font-size: 12px; }

ul#topnav li { margin: 0; padding: 0; display: inline; }

ul#topnav li a { color: #ffffff; text-decoration: none; padding: 0 0 5px 20px; text-transform: uppercase; font-weight: none; }

ul#topnav li a:hover { color: #ccc; }

I'm not sure which of the things I have need to be replaced by the things in the son of suckerfish css...can someone help me retain my formating and add a dropdown?

p.s. suckerfish is here http://htmldog.com/articles/suckerfish/dropdowns/

Jan 22nd, 2009, 11:12 PM
Hi Mark

In your initial menu, try making the list items block-level and floating them rather than getting them side-by-side by making them inline. The first half of that tutorial shows how to set up the basic HTML and CSS for the first part of the menu (i.e. the part that doesn't drop down) in a way that makes adding the drop down parts easier.

Jan 22nd, 2009, 11:50 PM
ok, I think I've hacked my way thought this a bit, but now I get the menu at the top of the screen as seen here mstevensphoto.com/headshots/folio2.html

I'd like it positioned at bottom right so the menu floats down over the flash content like this mstevensphoto.com/headshots/folio.htm

what am I missing (outside of a major education in this)?

also, I know nothing about javascript, will that effect my page validation?

thanks so much!

Pepe, the bull
Jan 22nd, 2009, 11:51 PM
This was doing something funny in IE7 (the menu disappearing behind the iframe), but it works in Firefox.

#topnav, #topnav ul {padding: 0; margin: 0; list-style: none; float:right;}
#topnav a {display: block;}
#topnav li {float: right;}
#topnav li ul li {float: left; clear:left;}
#topnav li ul {position: absolute; left: -999em;}
#topnav li:hover ul {left: auto;}
#topnav li:hover ul, #nav li.sfhover ul {left: auto;}

<ul id=topnav>
<li><a href="http://mstevensphoto.com/headshots/contact.html">Contact</a>
<li><a href="#">Contact 1</a></li>
<li><a href="#">Contact 2</a></li>
<li><a href="#">Contact 3</a></li>
<li><a href="#">Contact 4</a></li>
<li><a href="http://mstevensphoto.com/headshots/faq.html">FAQ</a>
<li><a href="#">FAQ 1</a></li>
<li><a href="#">FAQ 2</a></li>
<li><a href="#">FAQ 3</a></li>
<li><a href="#">FAQ 4</a></li>
<li><a href="http://mstevensphoto.com/headshots/price.html">Pricing</a>
<li><a href="#">Pricing 1</a></li>
<li><a href="#">Pricing 2</a></li>
<li><a href="#">Pricing 3</a></li>
<li><a href="#">Pricing 4</a></li>
<li><a href="http://mstevensphoto.com/headshots/about.html">About</a>
<li><a href="#">About 1</a></li>
<li><a href="#">About 2</a></li>
<li><a href="#">About 3</a></li>
<li><a href="#">About 4</a></li>
<li><a href="http://mstevensphoto.com/headshots/folio.html">Pictures</a>
<li><a href="#">Pictures 1</a></li>
<li><a href="#">Pictures 2</a></li>
<li><a href="#">Pictures 3</a></li>
<li><a href="#">Pictures 4</a></li>
sfHover = function() {
var sfEls = document.getElementById("topnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
if (window.attachEvent) window.attachEvent("onload", sfHover);

Jan 23rd, 2009, 12:13 AM
ok, thanks for the help folks. I think I'm getting it. seems like a lot of code

can/should this be shorter?

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
background: black;
float: right;
clear: left;


#nav a {
color: #ffffff; text-decoration: none; padding: 0 0 5px 15px; text-transform: uppercase; font-weight: none;
display: block;
width: 6em;

#nav li { /* all list items */
float: left;
width: 6em; /* width needed or else Opera goes nuts */

#nav li ul { /* second-level lists */
position: absolute;
background: black;
width: 6em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border: solid #333333;
border-width: 1px;

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
#nav li:hover, #nav li.sfhover {
background: #333333;

also, can I have my hover color change background only on the dropdown and not on every link in the nav list?

Jan 23rd, 2009, 12:19 AM
sorry, have to ammend...looks like it does mostly what I want in safari...nothing in firefox or explorer on pc :(

Pepe, the bull
Jan 23rd, 2009, 12:22 AM
What do you mean by the code being shorter? Do you just want less code?

As for the background color only changing on the dropdown, try:

#nav li li:hover, #nav li li.sfhover {background: #333333;}