RochCass: Title

If you hover over Products and Services you can see the sub-menu popping up instantly using only CSS styles.

HTML


				<ul class="menu">

                    <li><a href="#">Home</a></li>

                    <li><a href="#">About</a></li>

                    <li>

                        <a href="#">Products</a>

                          <ul>

                              <li><a href="#">Product 1</a></li>

                              <li><a href="#">Product 2</a></li>

                              <li><a href="#">Product 3</a></li>

                              <li><a href="#">Product 4</a></li>

                              <li><a href="#">Product 5</a></li>

                           </ul>

                    </li>

                    <li>

                         <a href="#">Services</a>

                         <ul>

                              <li><a href="#">Service 1</a></li>

                              <li><a href="#">Service 2</a></li>

                              <li><a href="#">Service 3</a></li>

                              <li><a href="#">Service 4</a></li>

                              <li><a href="#">Service 5</a></li>

                         </ul>

                    </li>

                    <li><a href="#">Contact Us</a></li>

                </ul>

CSS


					/* Menu */  

					ul.menu { background:#fefefe; border: 1px solid #eee; border-radius: 5px; height: 20px; padding: 10px; }

					ul.menu, ul.menu li { list-style: none; padding-left: 5px; margin-bottom: 0 !important; }

					ul.menu li{ float: left; padding-right: 20px; }

					ul.menu li a {font-family: arial; color: #555;font-size: 14px;font-weight: normal; cursor: pointer; padding: 0 0 30px 0; }

					ul.menu li a:hover {color: #000; text-decoration:none; }



					/* Submenu */

					.menu ul {
						position:absolute;
						left:-9999px;
						top:-9999px;
						list-style-type:none;
						z-index: 1000;
					}

					.menu li:hover { position:relative;  }

					.menu li:hover ul{left:0px; top:25px; background:#fefefe; border: 1px solid #eee; border-radius: 5px;padding:0;}


					.menu li:hover ul li a {padding:5px;display:block; width:80px; text-indent:15px;}

					.menu li:hover ul li a:hover { color: #000; }

Goodluck :)

Back to Article