ساختن منو های تار

با سلام خدمت شما دوستان امروز میخوام یکی از منو های زیبا رو برای شما آموزش بدم که با رفتن موس روی اون بقیه گزینه ها تار میشن شاید توی خیلی از سایت های دیگه دیده باشید و میخواید از اون توی سایت خودتون استفاده کنید برای این کار این آموزش رو دنبال کنید.

اول از همه کد های html رو مینوسیسم :

<ul class="bmenu">
    <li><a href="#">About</a></li>
    <li><a href="#">Illustrations</a></li>
    <li><a href="#">Photography</a></li>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Personal Projects</a></li>
    <li><a href="#">Contact</a></li>
</ul>

بعد از اون میریم کد های css رو مینویسیم :

body {
background-color: #1abc9c;
}
body a {
text-decoration: none;
}
.bmenu{
padding: 0px;
margin: 100px 0 0 300px;
position: relative;
list-style: none;
}
.bmenu li{
font-size: 50px;
display: block;
width: 600px;
}
.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 2px #eeb213;
color: #eeb213;
padding: 5px 20px;
margin: 2px;
background: rgba(0,0,0,0.7);
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.bmenu:hover li a{
text-shadow: 0px 0px 10px #eeb213;
color: transparent;
background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
background: rgba(0,0,0,1.0);
text-shadow: 0px 0px 1px #eeb213;
}

خوب حالا این کد های css توی مرورگر Internet Explorer به مشکل میخوره برای این که به مشکل بر نخورید کد زیر رو در شرط قرار بدید همین

<!--[if IE]>
    <style type="text/css">
        .bmenu li a{
            color: #fff;
        }
        .bmenu:hover li a{
            color:#fff;
        }
        .bmenu li a:hover{
            color: #fff;
            padding-left: 10px;
        }
    </style>
<![endif]-->

امید وارم از این آموزش خوشتون اومده باشه