PDA

View Full Version : Slashdot Menu



Briohny12
03-12-2008, 09:12 AM
1) Script Title: Slashdot Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

3) Describe problem:

Hi,

I'm having problems with turning my top menu item into a link (without the sub-menu's). I've searched the forum and the only answer i could find was to add the following code:

div.sdmenu div span a {
padding:3px 0px;
color: #??????;
}

...and then place my link inside the span.

This works (as a link) however it picks up the formating for the submenu link items. I would rather it just keep with the formatting of the top tier layer.

I've tried loads of different things but can't figure this one out... can anyone suggest what code i need to add or change?

CSS Code is as follows:

div.sdmenu {
width: 150px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
cursor: pointer;
vertical-align: top;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
cursor: pointer;
}
div.sdmenu div.collapsed:hover {
background: url(collapsed.gif) no-repeat;
background : #104359;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
cursor: pointer;
}
div.sdmenu div.collapsed {
height: 20px;
cursor: pointer;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
cursor: pointer;
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #104359;
text-decoration: none;
cursor: pointer;
}
div.sdmenu div a.current {
background: #104359;
color: #fff;
text-decoration: none;
cursor: pointer;
}
div.sdmenu div a:hover {
background: #104359;
color: #fff;
text-decoration: none;
cursor: pointer;
}

div.sdmenu div span a {
padding: 0px 0px;
}


Section of the code: (i've put in a normal drop down with submenu's (about) and the the one (links) that i'm trying to get to work as a top level anchor)

<div class="collapsed">
<span>ABOUT US</span>
<a href="about_us.html">About</a>
<a href="surf_instructors.html">Surf Instructors</a>
</div>
<div class="collapsed">
<span><a href="links.html">LINKS</a></span>
</div>


Thanks to anyone that can help.