Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

Make this widget go in a TD and start there rather than float at top?

This is the copy paste code...what I want is for the nav bar to be able to send in a <td> which is actually in the second <tr>. The problem is that the box is fully expanded instead of expands when you hover over it. I BELIEVE that is because this bar is set to float at top of the page (even when you scroll) and its relative effect to top and me forcing it to be past that is making it auto-expand. Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Slide Out Navigation : Untitled 1</title>

<script type='text/javascript' src='js/jquery-1.4.2.js'></script>

<style type="text/css">

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 10px;

list-style: none;

z-index:999999;

width:auto;

}

ul#navigation li {

display:inline;

float:left;

width:102px;

}

ul#navigation li a {

display: block;

float:left;

color:#000000;

margin-top: -2px;

height: 25px;

width:100px;

background-repeat:no-repeat;

background-position:50% 10px;

background-color:#e7f2f9;

border:1 solid #bddcef;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

ul#navigation li a:hover{

background-color:#cae3f2;

}

ul#navigation .home a{

background-image: url(png/settings.png);

}

ul#navigation .about a{

background-image: url(png/notes.png);

}

ul#navigation .search a{

background-image: url(png/notes.png);

}

ul#navigation .podcasts a{

background-image: url(png/ipod.png);

}

ul#navigation .rssfeed a{

background-image: url(png/weather.png);

}

ul#navigation .photos a{

background-image: url(png/maps.png);

}

ul#navigation .contact a{

background-image: url(png/chat.png);

}

</style>

</head>

<body>

<ul id="navigation">

<li class="home"><a href="">Home</a></li>

<li class="about"><a href="">About</a></li>

<li class="search"><a href="">Search</a></li>

<li class="photos"><a href="">Photos</a></li>

<li class="rssfeed"><a href="">Rss Feed</a></li>

<li class="podcasts"><a href="">Podcasts</a></li>

<li class="contact"><a href="">Contact</a></li>

</ul>

<script type="text/javascript">

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

</script>

</body>

</html>

1 Answer

Relevance
Still have questions? Get your answers by asking now.