1 reply [Last post]
BetsyM
Offline
newbie
Last seen: 9 years 36 weeks ago
Timezone: GMT-4
Joined: 2010-10-20
Posts: 4
Points: 6

Good morning, all...

I'm trying to set up a basic horizontal drop-down menu here: http://www.deadlyvintagesweets.com/dindex.htm.

The issues are:
1/ bullets show to left of every list item -- irregardless of use of list style:none.
2/ dropdown elements are visible before click
3/ elements show as vertical column

I haven't been able to find a drop-menu tutorial which uses background images -- so I've been using a ul/li list dropdown tutorial made for text links. I think the subsitution may be part of the problem, but I haven't been able to come up with an answer on my own. Can you help?
Betsy

CSS

  #tabs ul  {
margin : 0;
padding : 0;
list-style : none;
}
#tabs li {
float : left;
display : block;
position : relative;
z-index : 500;
margin : 0;
}
#tabs li a {
display : block;
padding : 0;
width : 167px;
height : 28px;
}
.dropdown ul {
position : absolute;
left : 0;
display : none;
margin : 0;
padding : 0;
list-style : none;
}
.dropdown li {
width : 167px;
float : left;
}
.dropdown a {
display : block;
height : 28px;
padding : 0;
}
.clear {
clear : both;
}
a#category:link, a#category:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/category1-menu.jpg") no-repeat 0% 0%;
padding : 0;
}
a#category:hover, a#category:active {
background-position : -167px 0%;
}
a#garment:link, a#garment:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/garment1-menu.jpg") no-repeat 0% 0%;
padding : 0;
}
a#garment:hover, a#garment:active {
background-position : -167px 0%;
}
a#era:link, a#era:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era1-menu.jpg") no-repeat 0% 0%;
padding : 0;
}
a#era:hover, a#era:active {
background-position : -167px 0%;
}
a#thirty:link, a#thirty:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era2.jpg") no-repeat 0% 0%;
}
a#thirty:hover, a#thirty:active {
background-position : -167px 0%;
}
a#forty:link, a#forty:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era3.jpg") no-repeat 0% 0%;
}
a#forty:hover, a#forty:active {
background-position : -167px 0%;
}
a#fifty:link, a#fifty:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era4.jpg") no-repeat 0% 0%;
}
a#fifty:hover, a#fifty:active {
background-position : -167px 0%;
}
a#sixty:link, a#sixty:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era5.jpg") no-repeat 0% 0%;
}
a#sixty:hover, a#sixty:active {
background-position : -167px 0%;
}
a#seventy:link, a#seventy:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era6.jpg") no-repeat 0% 0%;
}
a#seventy:hover, a#seventy:active {
background-position : -167px 0%;
}
a#eighty:link, a#eighty:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era7.jpg") no-repeat 0% 0%;
}
a#eighty:hover, a#eighty:active {
background-position : -167px 0%;
}
a#recent:link, a#recent:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/era8.jpg") no-repeat 0% 0%;
}
a#recent:hover, a#recent:active {
background-position : -167px 0%;
}
a#color:link, a#color:visited {
display : block;
width : 167px;
height : 28px;
background : url("http://www.deadlyvintagesweets.com/2010template/color1-menu.jpg") no-repeat 0% 0%;
padding : 0;
}
a#color:hover, a#color:active {
background-position : -167px 0%;
} 

BetsyM
Offline
newbie
Last seen: 9 years 36 weeks ago
Timezone: GMT-4
Joined: 2010-10-20
Posts: 4
Points: 6

thanks to the forum, I found

thanks to the forum, I found the list apart suckerfish dropdown (http://www.alistapart.com/articles/dropdowns/), adapted it and now things *seem* to be working.

For suckerfish, problems with IE are mentioned as well as a javascript solution ---> I notice the suckerfish dropdown was posted 2003.

Would these internet explorer issues still be an issue in 2010? And might the following jquery script take care of it... (culled from yet another tutorial - create the fanciest drop-down menu you ever saw : http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw)??

$(document).ready(function () {

$('#tabs li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);

},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);

});

---> where menu id=tabs
should I still worry about IE issues or will this do the trick ... and thanks so much for your comments...
Betsy