[thelist] Suckerfish Dropdown Menus - How do they work?

david.landy at somerfield.co.uk david.landy at somerfield.co.uk
Fri Apr 16 09:30:28 CDT 2004


Hi All,

I've been tasked by my project coordinator to design a main menu screen
consisting of four graphic buttons arranged in a square. The area between
them will contain the submenu items, which change depending on which button
is pressed (or hovered over).

I'm considering hacking the Suckerfish menus to do this but my CSS is
woefully inadequate - can anyone help? 

I'd also appreciate if anyone can explain how the Suckerfish stylesheet
(below) works? I'm OK with basic stylesheet definitions eg a:hover
{color:red} etc, but things like "ul > li" stump me completely. Does this
mean an unordered list that contains a list item? Help!

David


/*********************************
 styles for suckerfish dropdowns
*********************************/

#menu {
  width: 100%;
  background-color: #BBBBBB;
}

ul {
  font-family: ms sans serif, tahoma, arial, sans-serif;
  font-size: .7em;
  color: black;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
}

li {
  float: left;
  position: relative;
  width: 80px;
  text-align: left;
  cursor: default;
  background-color: #BBBBBB;
  border: 2px solid #BBBBBB;
}

li ul {
  display: none;
  position: absolute; 
  top: 13px;
  left: -2px;
}

li > ul {
  top: auto;
  left: auto;
}

li:hover ul, li.over ul{ display: block; }

#nav li li a {
  display: block;
  padding: 0.2em 10px;
  font-weight: normal;
  color: black;
  text-decoration: none;
  background-color: #BBBBBB;
  cursor: default;
}

#nav li li a:hover {
  padding: 0.2em 10px;
  color: white;
  background-color: #0000A0;
}

-- 
 
If you are not the intended recipient of this e-mail, please preserve the
confidentiality of it and advise the sender immediately of any error in
transmission. Any disclosure, copying, distribution or action taken, or
omitted to be taken, by an unauthorised recipient in reliance upon the
contents of this e-mail is prohibited. Somerfield cannot accept liability
for any damage which you may sustain as a result of software viruses so
please carry out your own virus checks before opening an attachment. In
replying to this e-mail you are granting the right for that reply to be
forwarded to any other individual within the business and also to be read by
others. Any views expressed by an individual within this message do not
necessarily reflect the views of Somerfield.  Somerfield reserves the right
to intercept, monitor and record communications for lawful business
purposes.


More information about the thelist mailing list