Home/ Questions/Q 8819847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T05:27:55+00:00

here is my jsfiddle code http://jsfiddle.net/jspence29/VqZSw/ but it seems as if it’s not working

  • 0

here is my jsfiddle code
http://jsfiddle.net/jspence29/VqZSw/
but it seems as if it’s not working so I will give you my code

#links ul

{
  margin-left: auto;
  position: fixed;
  margin-right: auto;
}

#links ul li

{
  margin-left: 200px;
  font-family: sans-serif:
  background-color: #fff;
  display: inline;
  width: 25px;
}

#links ul li a 

{
  background-color: #fff;
  opacity: 0.8;
  filter: alpha(opacity=80);
  color: #ffffff;
  text-align: center;
  width: 25px;
  padding: 10px;
  font-family: sans-serif;
  text-decoration: none;
  position: relative;
  top: 180px;
  overflow: hidden;
  transition:width .5s;
  -moz-transition:width .5s; /* Firefox 4 */
  -webkit-transition:width .5s; /* Safari and Chrome */
  -o-transition:width .5s; /* Opera */
}

#links ul li a:hover

{
  color: #000;
  width: 50px;
}
</style>

<head>
<body>


<div id="background" >
<div id="menuButton" onclick="showMenu()" >
<p><span style="cursor:pointer">Menu </span></p>
</div>
<div id="menu" style="display: none;">
<h1> Singapore </h1>
<p>ever onward, singapore </p>
<ul>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Gallery <span class="show"> 
Click to see pictures of the most elegant city in the world </span> </a> </li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Tour <span class="show">
Click to take a tour of the one of a kind singapore</span> </a> </li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Facts <span class="show"> 
Click to learn astounding facts of the one and only singapore</span> </a> </li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Author <span class="show"> 
Click to learn about me, and see my works cited page </span></a> </li>
</ul>
</div><!--Menu-->
<div id="links" >
<ul>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" >  Gallery </a></li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" > Tour </a></li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" >  Facts </a></li>
<li> <a href="http://www.spencedesign.netau.net/singapore.html" >  Author </a></li>
</ul>
</div>
</div><!--Background-->



</body>
</html>

And a link to my page http://www.spencedesign.netau.net/singaporehomemenu.html

So, my problem is that when you mouse over the button on the top the width changes. But when you do so on the bottom links, it doesn’t. It should change, because I used relatively the same code. So i don’t know what the problem is. I have scrutenized the code for about a half hour, and can’t find the fix. I know my CSS/HTML coding is rudementary, but I am a beginner, and I figure that the more I learn through you all, the better I will get. Thank you for your time, If you have seen my other posts, I am sorry for posting so much, I guess you could say that I am in over my head in my website plan.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The transition works just fine. An A element is an inline element, though. Width is ignored on it. Add display: block; and it’ll be fine.

    • 0