在CSS块中显示第一行

时间:2013-02-24 21:10:49

标签: css list hover block

我正在开发一个网站,里面有一个CSS阻止列表,有4行。当您将鼠标悬停在每一行上时,它会展开以显示该行的进一步说明。

我希望列表在网站加载后立即显示第一行,但当您将鼠标悬停在第2,3,4行时,它们会在何时展开。

这有意义吗?

CSS代码是:

#gallery{
    padding:0; 
    margin:-10px 0 0 0; 
        list-style-type:none; 
    overflow:hidden; 
    width:228px; 
    height:270px; 
    border:4px solid #FFF000;
    border-top:none;
    background-color:#ED145A;
 }

#gallery li a{
    display:block; 
    height:30px;
    width:218px; 
    text-decoration:none;
    color:#FFF;
    overflow:hidden;
    padding-left:10px;
}

#gallery li a:hover{
    background-color:#FFF000; 
    height:180px;
    color:#333;

HTML是:

<ul id="gallery">
<li><a href="contact.html"><b>3 page website</b><br /><span class="spacer">&nbsp;</span><br />
            <span>including custom design to fit your requirements, domain name of your choice and free webspace (limits apply), all for one year, only £150.00 (ex.VAT). Terms and conditions apply.<i> Contact us for more info</i></span></a></li>
        <li><a href="contact.html"><b>Start up business package</b><br /><span class="spacer">&nbsp;</span><br />
            <span>Packages include brand identity (logo design), print media (business cards, brochures, etc) and company website, starting from £300.00 (ex.VAT). <i>Contact us for more info</i></span></a></li>
        <li><a href="contact.html"><b>Logo Design</b><br /><span class="spacer">&nbsp;</span><br />
            <span>Customized logo design starting from £35.00 (ex.VAT) - You will not find this price anywhere! <i>Contact for more info</i></span></a></li>
      <li><a href="index.html"><b>More offers to come!</b><br /><span class="spacer">&nbsp;</span><br />
      <span>Please be sure to come back and visit this website as Ikonik Design are constantly reviewing and adding to this list!</span></a></li>

0 个答案:

没有答案