I'm trying to adapt the suckerfish dropdowns for a Drupal menu structure, which
is a series of nested unordered lists.
The test structure is:
* Home
o Photography
+ About me
+ Portfolio
# Events
+ Clients
+ Contact
o Writing and editing
My aim is to make the first 2 lists invisible, keep the 3rd list as the main
navigation, and have 4th level elements as dropdowns within their parent item.
My problem is that the hover-triggered dropdown is appearing on every 3rd level
list item. See:
http://www.dansmithdev.com/helena/node/6
I suspect I'm incorrectly selecting the element which triggers the hover
behaviour, which is the line:
#nav li:hover ul.menu ul.menu ul.menu, #nav li.sfhover ul.menu ul.menu ul.menu {
left: auto;
}
I'm not experienced enough with the CSS syntax to know what to look for. If
anyone has any advice it would be very gratefully received.
Many thanks
Dan
The navigation styles:
#nav, #nav ul.menu li {
padding: 0;
margin: 0;
list-style: none;
}
#nav ul.menu li {
margin: 0.25em;
background-color: #ff0;
}
#nav a {
display: block;
width: 6em;
}
#nav li.leaf, ul.menu ul.menu ul.menu li.expanded {
float: left;
width: 6em;
}
#nav ul {
visibility: hidden;
}
#nav li ul li ul {
visibility: visible;
}
#nav ul.menu ul.menu ul.menu ul.menu {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul.menu ul.menu ul.menu, #nav li.sfhover ul.menu ul.menu ul.menu {
left: auto;
}
The navigation HTML:
<div id="nav">
<div class="block block-menu" id="block-menu-2">
<h2 class="title">
Primary links
</h2>
<div class="content">
<ul class="menu">
<li class="expanded">
<a href="/helena/node/1">Home</a>
<ul class="menu">
<li class="expanded">
<a href="/helena/node/4">Photography</a>
<ul class="menu">
<li class="leaf">
<a href="/helena/node/5"
class="active">About me</a>
</li>
<li class="expanded">
<a href="/helena/node/6">Portfolio</a>
<ul class="menu">
<li class="leaf">
<a href="/helena/node/14">Events</a>
</li>
</ul>
</li>
<li class="leaf">
<a href="/helena/node/7">Clients</a>
</li>
<li class="leaf">
<a href="/helena/node/8">Contact</a>
</li>
</ul>
</li>
<li class="collapsed">
<a href="/helena/node/9">Writing and editing</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--/#nav-->
___________________________________________________________
Want ideas for reducing your carbon footprint? Visit Yahoo! For Good
http://uk.promotions.yahoo.com/forgood/environment.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
