Menu rollover images and text only working on one

Question

I have a rollover menu that displays the days of the week. They originally sat happily side by side each other with an image that appeared when hovered over. Now I'm trying to get text and an image to appear when you hover over a day. The text works on the first day ("Thurs") but the rest of the days don't appear, nor does the hover image background.

What am I doing wrong? Pls go easy on me, i'm trying!

I've also made a jsfiddle (this is how the menu originally looked)

THE HTML

  <div id="nav">
  <ul class="menu">
  <li>
  <div class="img1 left"> <a href="" id="thursButton" class="thursButton"></a>

  <p>Somewhere Only We Know Lily Allen
  <br/>Story Of My Life One Direction
  <br/>
  </p>
  </div>
    </li>
    <li>

<div class="img2 left"> <a href="" id="friButton" class="friButton"></a>

 <p>Somewhere Only We Know Lily Allen
 <br/>Story Of My Life One Direction
 <br/>
 </p>
  </div>
  </li>
  <li>

THE CSS

#nav {
display:inline;
list-style: none;
position: fixed;
width: 1290px;
margin: 0 auto; 
left:0px; 
right:0px;
float:clear;
top: 120px;
z-index: 1000;

}
.menu li {
display: inline;
vertical-align:top; 
float:left;

 }
.menu li a {
display: block;
height: 407px;
width:250px;
text-indent: -999999px;
}
.img1 {
width: 250px;
height: 407px;
position: relative;
}
 .thursButton {
  width:250px;
  height:177px;
  display:block;
  }
  #thursButton {
  background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
  }
  .thursButton:hover {
   background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
  }
.img2 {
width: 250px;
height: 407px;
position: relative;
}
.satButton {
width:250px;
height:177px;
display:block;
}
#satButton {
background-image:url(http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png');
}
.satButton:hover {
 background-image:url('http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png');
}
.left p {
color: #FFFFFF;
display: none;
font-size: 18px;
left: 10px;
position: absolute;
text-shadow: 1px 1px 1px #000000;
top: 100px;
width: 250px;
}
.left:hover p {

display:block;
}

A lot of errors in your HTML.
must be
. You are closing
and twice... — FLX, Dec 13 '13 at 15:33
`
` is generally accepted as usage du jour (http://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br) But jsfiddle always complains. It's perfectly valid for HTML documents, if not XHTML it should be used vs `
` — SW4, Dec 13 '13 at 15:35
@ExtPro You are right, but I still believe that for a better portability we should always use the closing one. — FLX, Dec 13 '13 at 15:38
There's only `Thu` in your fiddle. How can we check the other days? Also, do you really need background images to get your text to look like this? — tewathia, Dec 13 '13 at 15:40
@ExtPro I removed the
but the rest of the menu still isn't appearing — Social Monster, Dec 13 '13 at 15:44

WP_ · Accepted Answer · 2013-12-13T18:21:41.937

I suppose this looks somewhat presentable:

HTML

<div id="nav">
    <ul class="menu">
        <li>
            <a href="#" id="thursButton" class="thursButton">
                <div class="img1 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" id="friButton" class="friButton">
                <div class="img2 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" id="satButton" class="satButton">
                <div class="img3 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
    </ul>
</div>

CSS

#nav {
    display:inline;
    list-style:none;
    position:fixed;
    width:1290px;
    margin:0 auto; 
    left:0px; 
    right:0px;
    float:clear;
    top:120px;
    z-index:1000;
}

.menu li {
    display:inline;
    vertical-align:top; 
    float:left;
}

.menu li a {
    display:block;
    height:407px;
    width:250px;
}

.img1 {
    width:250px;
    height:407px;
    position:relative;
}

.thursButton {
    width:250px;
    height:177px;
    display:block;
}

#thursButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}

#thursButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}

.img2 {
    width:250px;
    height:407px;
    position:relative;
}

.friButton {
    width:250px;
    height:177px;
    display:block;
}

#friButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/9dtmxhsw1/fri.png');
}

#friButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/dCtmxht0o/fri-hover.png');
}

.img3 {
    width:250px;
    height:407px;
    position:relative;
}

.satButton {
    width:250px;
    height:177px;
    display:block;
}

#satButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png');
}

#satButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png');
}

.left p {
    color:#FFFFFF;
    display:none;
    font-size:18px;
    left:10px;
    position:absolute;
    text-shadow:1px 1px 1px #000000;
    top:100px;
    width:250px;
}

.left:hover p {
    display:block;
}

There were multiple errors with incorrectly closed tags.

I suggest Using a HTML or CSS Validator to troubleshoot future issues:

http://validator.w3.org/ For HTML

http://jigsaw.w3.org/css-validator/ For CSS

Ah ok, so I position the img as 'relative' and the button is 'display:block'? — Social Monster, Dec 13 '13 at 16:02
How do you get the hover image to appear tho? I created a hover section but it only shows the original img — Social Monster, Dec 13 '13 at 16:03
also I cleaned up my html http://jsfiddle.net/arp8D/7/ thank you for those two links :) — Social Monster, Dec 13 '13 at 16:59
I updated my answer. Should work better now. I suggest getting a text editor like Notepad++ so you can notice errors thanks to syntax highlighting. It makes your job a lot easier and it's also freeware. — WP_, Dec 13 '13 at 17:35
Amazing, thank you @WP_. Just so I understand and can learn for future ref - did you remove the text-indent and add a # instead of . on the hover? — Social Monster, Dec 13 '13 at 18:04
Yes. The `text-indent` is redundant because the
-texts are already set to `display:none;`. I changed the hover thingies to id's (#) rather than classes (.). You were using CSS code for the classes "thursButton", "friButton" and "satButton" to set their background image. But you also used id's to change the background image when hovering. That doesn't work at all. Either use classes or id's, not both, when using pseudo-classes like `:hover` or `:focus` for a specific element. Practice makes perfect! — WP_, Dec 13 '13 at 18:36
Could i possibly pester you for a tiny bit longer? The menu has knocked the alignment of the site content http://tinyurl.com/o46hj3b. Any ideas why? — Social Monster, Dec 13 '13 at 18:42
I suggest that you get a good developer tool like FireBug if you use Firefox. Many browsers already have an integrated developer tool that you can use by clicking F12. Use the element inspector button (usually an arrow and a square icon) and then click on any element on your page to view the HTML code and the CSS rules that affects it. I also recommend fixing the DOCTYPE error on your webpage before doing any heavy work. If the DOCTYPE is not correct, your code is not guaranteed to work as you'd expect. — WP_, Dec 13 '13 at 18:55
Sorry, @WP_... one final question, I promise. When I hover up the text, the hover image disappears tinyurl.com/o46hj3b. I checked with firebug and couldnt see anything unusual :-/ — Social Monster, Dec 14 '13 at 15:18

Menu rollover images and text only working on one

1 Answers1