Rozwijane menu w css

0

tak jWitam.
Próbuje zrobić wysuwane menu w css ale kombinuje i nie mogę tego zmusić by wyglądało tak jak powinno.
Czy ktoś mógłby mi pomoć co zrobić by wyglądało to tak jak powinno?
Z góry dziękuję za pomoc.
A tutaj kod.


<style>
body{
	margin:0;
	padding:0;
}

ul{
	height:75px;
	background-color:#f20559;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:0;
	margin-left:0;
}
ul > li{
	margin-left:5px;
	margin-right:5px;
	float:left;
	borders-right: dotted 1px ;
	width:15,8%;
	text-align:center;
	color:white;
	list-style-type:none;
	
}
ul > li > ul > li {
	display:none;
}

ul > li > ul > li :first-of-type :hover + ul > li > ul > li{
	display:block;
	margin-left:5px;
	margin-right:5px;
	clear:both;
	borders-right: dotted 1px ;
	width:165px;
	height:75px;
	text-align:center;
	color:white;
	list-style-type:none;
	background-color:#f20559;
}

ul > li > ul > li :first-of-type{
	display:block;
	clear:both;
	borders-right: dotted 1px ;
	width:15,8%;
	height:70px;
	text-align:center;
	color:white;
	list-style-type:none;
	background-color:#f20559;
}



</style>

<div id = "menu" >
	<ul>
		<li>
			<ul>
				<li>
					Boty
				</li>
				<li>
					<a href="http://www.gimnazjumjestcool.pl/boty"> Szukam bota </a>
				</li>
				<li>
					<a href="http://www.gimnazjumjestcool.pl/tworcybotow"> Tworze bota </a>
				</li>
			</ul>
		</li>
		<li><a href="http://www.gimnazjumjestcool.pl/forum"> Forum  </a></li>
		<li>
			<ul>
				<li>
					Sprzedaz
				</li>
				<li>
					<a href="http://www.gimnazjumjestcool.pl/nielegalnasprzedaz"> Szukam produktu </a>
				</li>
				<li>
					<a href="http://www.gimnazjumjestcool.pl/szukamproduktu">  Sprzedaje </a>
				</li>
			</ul>
		</li><li>
			<ul>
				<li>
					Prace domowe
				</li>
				<li>
					<a href="http://www.gimnazjumjestcool.pl/pracedomowe"> Chce by mi odrobili lekcje </a>
				</li>
				<li>
					<a href="http://www.gimnazjumjestcool.pl/szukampracydomowej"> Odrobie komus lekcje  </a>
				</li>
			</ul>
		</li>
		<li><a href="http://www.gimnazjumjestcool.pl/poradniki"> Poradniki </a></li>
		<li><a href="http://www.gimnazjumjestcool.pl/powiadomienia"> Powiadomienia </a></li>
		<li><a href="http://www.gimnazjumjestcool.pl/onas"> O nas  </a></li>
		<li><a href="http://www.gimnazjumjestcool.pl/index/wyloguj"> Wyloguj  </a></li>
	</ul>
</div>
0

Przykład, zmień go trochę, css nie jest mój:

<style>
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width:200px;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  background:#667;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}
</style>
</head>
<body>
<nav class="vertical" >
    <ul>
        <li><a href="#">Boty</a>
            <ul>
                <li><a href="http://www.gimnazjumjestcool.pl/boty"> Szukam bota </a></li>
                <li><a href="http://www.gimnazjumjestcool.pl/tworcybotow"> Tworze bota </a></li>
            </ul>
        </li>
        <li><a href="http://www.gimnazjumjestcool.pl/forum"> Forum  </a></li>
        <li><a href="#">Sprzedaz</a>
            <ul>
                <li><a href="http://www.gimnazjumjestcool.pl/nielegalnasprzedaz"> Szukam produktu </a></li>
                <li><a href="http://www.gimnazjumjestcool.pl/szukamproduktu">  Sprzedaje </a></li>
            </ul>
        </li>
        <li><a href="#">Prace domowe</a>
            <ul>
                <li><a href="http://www.gimnazjumjestcool.pl/pracedomowe"> Chce by mi odrobili lekcje </a></li>
                <li><a href="http://www.gimnazjumjestcool.pl/szukampracydomowej"> Odrobie komus lekcje  </a></li>
            </ul>
        </li>
        <li><a href="http://www.gimnazjumjestcool.pl/poradniki"> Poradniki </a></li>
        <li><a href="http://www.gimnazjumjestcool.pl/powiadomienia"> Powiadomienia </a></li>
        <li><a href="http://www.gimnazjumjestcool.pl/onas"> O nas  </a></li>
        <li><a href="http://www.gimnazjumjestcool.pl/index/wyloguj"> Wyloguj  </a></li>
    </ul>
</nav>

1 użytkowników online, w tym zalogowanych: 0, gości: 1