Просмотр поста

Так вот примеры выпадающего меню на jQuery
CSS

#drop-and-down{
		margin: 0;
		padding: 0;
	}
	#drop-and-down li{
		float: left;
    	        list-style: none;	
	}
	#drop-and-down li a{
		display: block;
		padding: 5px 12px;
		text-decoration: none;
		width: 70px;
		background: #20548E;
		color: #EAFFED;	
	}
	
	#drop-and-down li a:hover{
		background: #1A4473;	
	}
	#drop-and-down li ul{
		margin: 0;
		padding: 0;
		position: absolute;
		display: none;
	}
	#drop-and-down li ul li{
		float: none;
    	display: inline;
	}
	#drop-and-down li ul li a{
		width: auto;
    	background: #9F1B1B;
	}
	#drop-and-down li ul li a:hover{
		background: #7F1616;
	}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
		$('#drop-and-down li').hover(
		function(){
			$(this).children('ul').slideDown();
		},
		function(){
			$(this).children('ul').slideUp();
		});
	});
    </script>

<ul id="drop-and-down">
    	<li><a href="#">Меню 1</a>
        	<ul>
            	<li><a href="#">Подменю 1.1</a></li>
            	<li><a href="#">Подменю 1.2</a></li>
            	<li><a href="#">Подменю 1.3</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 2</a>
        	<ul>
            	<li><a href="#">Подменю 2.1</a></li>
            	<li><a href="#">Подменю 2.2</a></li>
            	<li><a href="#">Подменю 2.3</a></li>
            	<li><a href="#">Подменю 2.4</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 3</a>
        	<ul>
            	<li><a href="#">Подменю 3.1</a></li>
            	<li><a href="#">Подменю 3.2</a></li>
            	<li><a href="#">Подменю 3.3</a></li>
            	<li><a href="#">Подменю 3.4</a></li>
            	<li><a href="#">Подменю 3.5</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 4</a>
        	<ul>
            	<li><a href="#">Подменю 4.1</a></li>
            	<li><a href="#">Подменю 4.2</a></li>
            	<li><a href="#">Подменю 4.3</a></li>
            	<li><a href="#">Подменю 4.4</a></li>
            	<li><a href="#">Подменю 4.5</a></li>
            	<li><a href="#">Подменю 4.6</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 5</a>
        	<ul>
            	<li><a href="#">Подменю 5.1</a></li>
            	<li><a href="#">Подменю 5.2</a></li>
            	<li><a href="#">Подменю 5.3</a></li>
            	<li><a href="#">Подменю 5.4</a></li>
            	<li><a href="#">Подменю 5.5</a></li>
            	<li><a href="#">Подменю 5.6</a></li>
            	<li><a href="#">Подменю 5.7</a></li>
            </ul>
        </li>
    </ul>