Под менюта с колонки

Gamerz

Registered
Искам да попитам знаете ли как да направя обикновенни менюта на под-мента с колонки .. нещо такова


|Начало | Музика Филми
|_____________________________
Kategorii tuk 2ra kolonka s dr ne6ta



________________________________________


и така да изглежда всяко меню което е селектирано.

Ето кода на сегашното

html :

Код:
      <script type="text/javascript" src="jquery.pack.js"></script>
  
      <script type="text/javascript" src="jquery.corner.js"></script>
   
      <script type="text/javascript">
   
        $(document).ready(function() {
   
          $("#nav ul li a").corner();
   
        });
   
      </script>


<div id="nav">

  <ul>

    <li><a href="index" class="selected">НАЧАЛО</a></li>

    <li><a href="system" class="green">category</a></li>

    <li><a href="system" class="red">category</a> </li>

    <li><a href="system" class="blue">category</a> </li>

    <li><a href="system" class="white">category</a> </li>

    <li><a href="system" class="blue2">category</a> </li>

    <li><a href="system" class="orange">category </a></li>

    <li><a href="filmi">ФИЛМИ</a></li>

    <li><a href="muzika">МУЗИКА</a></li>


  </ul>

</div>


css:

Код:
  #nav ul {

        margin: 0px;
   
        padding: 0px;
  
        list-style: none;
       
        align:left;
       

      }
   
       
   
      #nav ul li {
   
        background-color: #197eb0;
        height:7px;
   
      }
  
       
  
      #nav ul li,
  
      #nav ul li a {
  
        float: left;
  
        display: block;
  
      }
  
       
  
      #nav ul li a {
 
        margin: 0px;
 
        padding: 5px;
  
        font-size: 13px;

font-weight:bold;
  
        color: #fff;
  
        text-decoration: none;



      }

  
      
   
 #nav a.green:hover  {color: #30f410;}
 #nav a.red:hover  {color: #bc0909;}
 #nav a.blue:hover  {color: #10edfb;}
 #nav a.white:hover  {color: #fffdbe;}
 #nav a.blue2:hover  {color: #1037fb;}
 #nav a.orange:hover  {color: #fa8310;}
 
Код:
<style>
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}
</style>

Код:
<ul class="dropdown">
	<li><a href="./">Начало</a></li>
	<li><a href="./">Музика</a>

		<ul>
			<li><a href="./">Кагегория</a></li>
			<li><a href="./">Кагегория</a></li>
			<li><a href="./">Кагегория</a></li>
			<li><a href="./">Кагегория</a></li>
			
		</ul>
	</li>
	<li><a href="./">Филми</a>
		<ul>
			<li><a href="./">Кагегория</a></li>
			<li><a href="./">Кагегория</a></li>
			<li><a href="./">Кагегория</a></li>
			<li><a href="./">Кагегория</a></li>
			<li><a href="./">Кагегория</a></li>
		</ul>

			
	
</ul>
 

Back
Горе