Telerik Academy CSS Exam-Variant 1

Task1

by Naydenov_it

HTML

<body>
	<div id="wrapper">
		<aside>
			<ul class="sidebar">
				<li>
					<a href="#">Sidebar Item #1</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item #1.1</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.2</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.3</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.4</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Sidebar Item #2</a>
				</li>
				<li>
					<a href="#">Sidebar Item #3</a>
				</li>
				<li>
					<a href="#">Sidebar Item #4</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item #4.1</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.2</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.3</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.4</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Sidebar Item #5</a>
				</li>
				<li>
					<a href="#">Sidebar Item #6</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
					</ul>
				</li>
			</ul>
		</aside>
	</div>
</body>

CSS

*{margin:0;
  padding:0px;
}
div.wrapper{
    width:960px;
}
aside{
    font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
	font-size: 22px;
    margin-left:20px;
    margin-top:10px;
}
aside ul.sidebar {

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CF99FF), color-stop(100, #8B78FF));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #CF99FF 0%, #8B78FF 100%);
    /* W3C Markup */ 
    background-image: linear-gradient(to bottom, #CF99FF 0%, #8B78FF 100%);

    display:inline-block;
    padding:5px 10px;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
}
aside ul.sidebar li{
    list-style-type:none;
    padding-left: 15px;
     padding-right: 15px;
    border-bottom:1px solid #9D00FF;
}

aside ul.sidebar li a{
   text-decoration:none;
   display:inline-block;
   padding:5px;
   color:black;
}
    
aside ul.sidebar li:last-of-type {
   border:none;
}
aside ul.sidebar li:hover{
     border:1px solid #9D00FF;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
}
aside ul.sidebar li ul {
    list-style-type:none;
    display:none;
}
 
aside ul.sidebar li:hover ul{
    display:block;
    position:absolute;
    left:220px;
    margin-top:-40px;
    margin-left:10px;
    padding:5px 0px;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    background-color:#B5AAFF;
}
   
aside ul.sidebar li:hover ul li a {
padding-left:15px;
}
aside ul.sidebar li:hover ul li:hover{
    border:none;
    background-image: url(imgs/arrow.png) ;
    background-repeat:no-repeat;
    background-position:0px 10px;
}
aside ul.sidebar li:hover ul li:hover a {
    border:1px solid #9D00FF;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
}