Simple Tooltip Menu Dropdown CSS3

Simple Tooltip Dropdown Menu CSS3 - Efek tooltip selain untuk link dan gambar bisa juga kita terapkan dalam bentuk menu dropdown agar tampilan lebih kreatif dan cantik tentunya. Banyak cara untuk membuat efek tooltip mulai menggunakan gambar, CSS maupun efek Jquery UI, namun kali saya hanya akan memberikan contoh simplenya menggunakan efek hover pseudo element ( before: after: ) dengan CSS3

DEMO
VIEW CODE

Komponen dasarnya adalah sebagai berikut :

CSS

Code:

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
#menu{
    width: 100%;
    padding:10px 0 0 0;
    list-style: none;
    background: #34495e;border-left:30px solid #34495e;border-radius:3px
}

#menu li{
    float: left;
    padding:0 0 10px 0;
    position: relative;
}

#menu a{
    float: left;
    height: 25px;
    padding:0 12px 0 12px;
    color: #fff;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
}

#menu li:hover > a{background:#16a085;
    color: #fff;
}

*html #menu li a:hover{ /* IE6 */
    color: #fff;
}

#menu li:hover > ul{
    display: block;
}

/* Sub-menu */
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #2c3e50;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin:0;
    padding: 0;
    display: block;
}

#menu ul li:last-child{
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
    height: 10px;
    width: 150px;
}

#menu ul a:hover{
        background: #16a085;
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #2c3e50;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #2c3e50;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

HTML

<ul id="menu">
    <li>
        <a href="#"><i class="fa fa-cogs"></i> MENU 1</a>
        <ul>
            <li><a href='#'> <i class="fa fa-cogs"></i> Settings</a></li>
            <li><a href='#'> <i class="fa fa-envelope-o"></i> Contact Me</a></li>
            <li><a href='#'> <i class="fa fa-tag"></i> Tag</a></li>
            <li><a href='#'> <i class="fa fa-user"></i> About Me</a></li>
        </ul>
    </li>
<li>
<ul>
menu seterusnya.....
</ul>
</li>
</ul>

SOURCE

 

keren nih kalo yang beginian, btw itu kode source nya bikin sendiri apa edit ulang gan ?

 

ok thanks gan tambah ilmu

 

Source sya ambil dari blog saya sendiri...dan kode murni dari saya sendiri makasih...partisipasinya

 

em.. thanks sharenya gan..
jika pengin nambah ilmu atau belajar CSS buka aja CSS Trick
hanya saja harus bisa english meskipun dikit" ..

 

s

sama sama gan

 

Keren...
Mksih Den, buat pemula sepertk saya.