HOW TO MAKE CSS HOVER MENU

css hover menu

For people who are looking for ways to make menu using css try to see it develop further.

Css

#menu a:link{color:#fff;text-decoration:none;}
#menu a:visited{text-decoration:none;color:#fff;}
#menu a:hover{text-decoration:underline;color:#fff;}
#menu a:active{text-decoration:none;color:#fff;}

ul{margin:0;padding:0;list-style:none;}
ul li{display:block;position:relative;float:left;}
li ul{display:none;}
ul li a{display:block;text-decoration:none;color:#fff;padding:5px 15px;background:#ff4200;white-space:nowrap;}
ul li a:hover{background:#617F8A; }
li:hover ul{display:block;position:absolute;}
li:hover li{float:none;}
li:hover a{background:#617F8A;}
li:hover li a:hover{background:#95A9B1;}
</style>

Html

<nav>
<ul id="menu">
  <li><a href="">home</a></li>
    <li><a href="">Page 2</a>
    <ul>
    <li><a href="">Page 2.1</a></li>
    <li><a href="">Page 2.2</a></li>
    <li><a href="">Page 2.3</a></li>
    <li><a href="">Page 2.4</a></li>
    </ul>
  </li>
    <li><a href="">Page 4</a>
    <ul>
    <li><a href="">Page 4.1</a></li>
    </ul>
  </li>
  <li><a href="">Page 5</a></li>
  <li><a href="">Page 6</a></li>
  <li><a href="">Page 7</a></li>
</ul>
</nav>