Thursday, November 21, 2013

html and css simple menu

Html code :

<div style="width:800px; height:auto; margin:0 auto;">
<div style="width:800px;; margin:0 auto; background:#000;">
    <div id="mhover" style="float:left; height:50px; width:150px; text-align:center;"><a style="font-size:14px; line-height:50px; text-decoration:none; color:white;" href="#">HOME</a></div>
    <div id="mhover" style="float:left; height:50px; width:150px; text-align:center;"><a style="font-size:14px; line-height:50px; text-decoration:none; color:white;" href="#">PORTFOLIO</a></div>
    <div id="mhover" style="float:left; height:50px; width:150px; text-align:center;"><a style="font-size:14px; line-height:50px; text-decoration:none; color:white;" href="#">PROJECT</a></div>
    <div id="mhover" style="float:left; height:50px; width:150px; text-align:center;"><a style="font-size:14px; line-height:50px; text-decoration:none; color:white;" href="#">HIRE ME</a></div>
    <div id="mhover" style="float:left; width:200px; height:50px; text-align:center;"><a style="font-size:14px; line-height:50px; text-decoration:none; color:white;" href="#">SEO</a></div>
    <div style="clear:both;"></div>
</div>
</div>

CSS Code :

<style type="text/css">

#mhover a:hover
{
    color:#000 !important;
    display:block;
    line-height:50px;
    background-color:#F00;
}
</style>

No comments: