Membuat dropdown css dan tabel zebra ~ Crezpector Blog's

Senin, 23 Desember 2013

Membuat dropdown css dan tabel zebra

01.11

Unknown

Contoh screenshot:

Code CSS:

body{
 margin:0;
}
div#menu{
 background:#64abfb;
 width:100%;
 height:64px;
 position:fixed;
 top:0;
} 
li {
 list-style:none !important;
 color:#FFF;
 padding:10px;
 font-size:20px;
 text-decoration:none;
 }

li > a:after { content: ' »'; } /* Change this in order to change the Dropdown symbol */

li > a:only-child:after { content: ''; }  

li {
 list-style:none !important;
 color:#FFF;
 padding:10px;
 font-size:20px;
 text-decoration:none;
 }

nav ul {
 background-color:#64abfb;
 padding:0;
 margin:0;
 }

nav ul li {
 list-style: none; 
 line-height:44px;
 float:left;
 background-color:#64abfb;
 }

nav ul li a {
 color:#FFF;
 padding:10px;
 font-size:20px;
 text-decoration:none;
}

li a:hover {
 border-bottom:3px #FFF solid; 
 }
 
nav ul li ul { display:none; } /* Makes the Dropdown menu Hidden by default */

nav ul li:hover  ul  { /* Displayes the dropNav when Hovered over the nav item with the .drop class */
 z-index:99999;
 display:list-item !important;
 position:absolute;
 margin-top:5px;
 margin-left:-10px;
 }

nav ul li:hover  ul li {
 float:none;
 }
#tabelnya table{
 margin:20px;
 margin-top: 20px;
 border:#64abfb 1px solid;
}
#tabelnya table td,th{
 border-bottom: #64abfb 1px solid;
}
#tabelnya table tbody tr:nth-child(odd){
 background-color: #64abfb;
 color:#fff;
}
#tabelnya table tbody tr:hover{
 background-color:#0099FF;
 font-weight:bold;
}

#nama{
 position:absolute;
 left:800px;
 top: 100px;
 padding:10px;
 padding-top:0;
 width:300px;
 background-color:#FFF;
 border:#64abfb 2px solid;
}

Code HTML:

<body>
<div id="menu">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li>Drop Down
           <ul>
                <li><a href="#">Drop 1</a></li>
                <li><a href="#">Drop 2</a></li>
                <li><a href="#">Drop 3</a></li>
           </ul>
          </li>
            <li>About</li>
      </ul>
    </nav>
</div>
<div id="tabelnya">
  <div style="margin-top:100px; margin-left:40px;">
    <h3>Daftar Pemain Sepak Bola</h3>
  </div>
 <table width="757" border="0" cellspacing="0" cellpadding="5">
  <thead>
        <th width="73">No</th>
        <th width="310">Nama</th>
    <th width="161"><p>Negara</p>      </th>
  <td width="171"><div align="center"><strong>Club</strong></div>
  <tbody>
  <tr>
    <td><div align="center">1</div></td>
    <td><div align="center">Cristiano Ronaldo</div></td>
    <td><div align="center">Portugal</div></td>
    <td><div align="center">Real Madrid</div></td>
  </tr>
  <tr>
    <td><div align="center">2</div></td>
    <td> <div align="center">Mesut Ozil</div></td>
    <td> <div align="center">Jerman</div></td>
    <td><div align="center">Arsenal</div></td>
  </tr>
  <tr>
    <td><div align="center">3</div></td>
    <td><div align="center">Wayne Rooney</div></td>
    <td><div align="center">Inggris</div></td>
    <td><div align="center">Manchester United</div></td>
  </tr>
  <tr>
    <td><div align="center">4</div></td>
    <td><div align="center">Andrea Pirlo</div></td>
    <td><div align="center">Italy</div></td>
    <td><div align="center">Juventus</div></td>
  </tr>
  <tr>
    <td><div align="center">5</div></td>
    <td> <div align="center">Leonal Messi</div></td>
    <td><div align="center">Argentina</div></td>
    <td><div align="center">Barcelona</div></td>
  </tr>
  <tr>
    <td><div align="center">6</div></td>
    <td><div align="center">Adnan Januzaj</div></td>
    <td><div align="center">Belgia</div></td>
    <td><div align="center">Manchester United</div></td>
  </tr>
  </tbody>
</table>
</div>

<div id="nama">
 <p><h3> Nama </h3> 
 Achmad Munawir Noviandri
  <p><h3> NIM </h3> 
  L200130184
  <p><h3> Kelas </h3> E</p>
</div>
</body>