PDA

View Full Version : SuckerTree Vertical Menu - help



cymrusteve
12-21-2006, 02:38 PM
1) Script Title: SuckerTree Vertical Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/

3) Describe problem:
Love the menu, but am having a slight problem after attempting to customize it. Any chance someone could take a look at my source code and see if they can spot the mistake?

Here's the page with the navigation:

http://www.cymru66.com/runningetc/navtest.php

The problem is with the mouseover on the "Directions" and "Specials" links. See how the sub categories jump to the top of the DIV? Tried all sorts of things to fix it but with no success.

Many thanks in advance,

Steve

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
width:140px;
margin:0 0 18px;
padding:0;
list-style:none;
border-bottom: 1px solid transparent;
}

.suckerdiv ul li{
position: relative;
width:140px;
padding:0;
line-height:1.4em;
display:inline;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 140px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:130px;
float:left;
margin-bottom:5px;
padding:5px 1px 5px 5px;
border-left:4px solid #cccccc;
text-decoration:none;
}

.suckerdiv ul li a:visited {
color: black;
}

.suckerdiv ul li a:hover {
background-color:#eaeaea;
border-left:4px solid #F12025;
color:#505050;
}

.suckerdiv .subfolderstyle{
background-color:#f4f4f4;
border-left:4px solid #cccccc;
color:#505050;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>


<div class="suckerdiv">
<ul id="suckertree1">

<li><a href="#">Front page</a></li>
<li><a href="#">Meet the Staff</a></li>
<li><a href="#">Gear</a></li>
<li><a href="#">Specials</a>
<ul>
<li><a href="#">Norfolk</a></li>
<li><a href="#">Virginia Beach</a></li>
</ul>

</li>
<li><a href="#">Directions</a>
<ul>
<li><a href="#">Norfolk</a></li>
<li><a href="#">Virginia Beach</a></li>
</ul>
</li>
<li><a href="#">Weekly Workouts</a></li>
<li><a href="#">Local Races</a></li>

<li><a href="#">Links</a></li>
</ul>
</div>