Html 菜单滚动图像和文本仅处理一个

我有一个滚动菜单，显示一周中的几天。他们最初愉快地并排坐着，在空中盘旋时出现了一个图像。现在，我试图让文本和图像在您将鼠标悬停在某一天时出现。文本在第一天（“星期四”）起作用，但其余时间不会显示，悬停图像背景也不会显示

我做错了什么？请对我放松点，我正在努力

我还做了一个（这是菜单上的内容）

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>

---

我想这看起来有点像样：

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>

有多个错误，标记关闭不正确

我建议使用HTML或CSS验证程序来解决未来的问题：

用于HTML

---

对于CSS，HTML中有很多错误
必须是
。您正在关闭并且关闭了两次…

通常被认为是日常用法（），但JSFIDLE总是抱怨。它对HTML文档完全有效，如果不是XHTML，至少应该使用它，而不是

，列表标记是无效的。@ExtPro你是对的，但我仍然认为为了更好的可移植性，我们应该始终使用结束标记。你的小提琴中只有

Thu

。其他日子我们怎么查？另外，你真的需要背景图像来让你的文本看起来像这样吗？啊，好的，所以我把img定位为“相对”，按钮是“display:block”？你如何让悬停图像看起来像这样？我创建了一个悬停部分，但它只显示了原始的imgal，所以我清理了我的html，谢谢你的这两个链接：）我更新了我的答案。现在应该更好了。我建议使用Notepad++之类的文本编辑器，这样您就可以通过语法突出显示来注意错误。它让你的工作轻松多了，而且还是免费软件。太棒了，谢谢你@WP\ux。只是为了让我理解并可以为将来的参考学习-您是否删除了文本缩进并添加了#而不是。悬停？

<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>

#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;
}