При наведении на елемент появляются другие елементы

.mama { display: inline-flex; flex-wrap: wrap; } 
 
.bubu-hidden { 
  display: none; 
  width: 60px; 
  height: 60px; 
  margin: 5px; 
  background-color: orange; 
  cursor: pointer; 
} 
 
.bubu-hidden:hover { background-color: #f36700; } 
 
.bubu-hidden.visi { display: block; } 
 
.mama:hover .bubu-hidden { display: block; }

<div class="mama"> 
  <div class="bubu-hidden visi"></div> 
  <div class="bubu-hidden"></div> 
  <div class="bubu-hidden"></div> 
  <div class="bubu-hidden"></div> 
</div>

html { 
	overflow: scroll; 
	overflow-x: hidden; 
} 
 
html, body { 
	width: 100%; 
	height: 100%; 
	background: #181f4b; 
	font-family: 'Roboto', sans-serif; 
	font-size: 1.2em; 
	color: #969dcd; 
} 
 
::-webkit-scrollbar { 
	width: 0px; 
	background: transparent; 
} 
 
::-webkit-scrollbar-thumb { 
	background: #FF0000; 
} 
 
.unselectable { 
    user-select: none; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 
 
.main-container { 
	height: 100%; 
	overflow-x: hidden; 
} 
 
.sidebar { 
	position: fixed; 
	left: 0px; 
	top: 0px; 
	bottom: 0px; 
	background: linear-gradient(to right, #2c58dd, #2a44c8); 
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2); 
	padding: 30px 0 30px 0; 
	z-index: 1; 
} 
 
.logo { 
	display: flex; 
	width: 100%; 
	justify-content: center; 
	align-items: center; 
} 
 
.logo img { 
	width: 40px; 
} 
 
nav { 
	margin-top: 50px; 
} 
 
.sidebar > nav > ul:first-child, 
.sidebar > nav > ul:nth-child(2) { 
	margin-bottom: 15px; 
} 
 
.sidebar > nav > ul > li > a { 
	color: #6b83e2; 
	display: block; 
	width: 48px; 
	height: 48px; 
	margin: 0 auto; 
	opacity: 0.3; 
	border-radius: 50%; 
	position: relative; 
} 
 
.personal-office { 
	margin-bottom: 3px; 
} 
 
.sidebar > nav > ul > .personal-office > a { 
	opacity: 1; 
} 
 
.personal-office > a > img:hover{ 
	transition: 1s; 
	transform: rotateZ(360deg); 
} 
 
.account_avatar_image { 
	width: 48px; 
	border-radius: 50%; 
	display: block; 
} 
 
.sing-in > a { 
	background: url(/images/sing-in.png) no-repeat center; 
} 
 
.sing-out > a { 
	background: url(https://i.imgur.com/YwT5mO8.png) no-repeat center; 
} 
 
.rules > a { 
	background: url(https://i.imgur.com/N5pzODb.png) no-repeat center; 
} 
 
.sing-in > a:hover, 
.sing-out > a:hover, 
.rules > a:hover { 
	opacity: 1; 
	background-color:  #385ce2; 
} 
 
.filters { 
	flex-wrap: wrap; 
} 
 
.filters:hover .a-z-background-hidden, 
.filters:hover .a-z-hidden { 
	display: block; 
} 
 
.filter-hidden { 
	background: url(https://i.imgur.com/regS5LD.png) no-repeat center; 
} 
 
.filter-hidden { 
	color: #6b83e2; 
	display: none; 
	width: 48px; 
	height: 48px; 
	margin: 0 auto; 
	opacity: 0.3; 
	border-radius: 50%; 
	position: relative; 
} 
 
.filter-hidden:hover { 
	cursor: pointer; 
	opacity: 1; 
	background-color:  #385ce2; 
} 
 
.filter-hidden.visible { 
	display: block; 
} 
 
.a-z-background-hidden { 
	background: linear-gradient(to right, #2c58dd, #2a44c8); 
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2); 
	display: none; 
	width: 48px; 
	height: 48px; 
	margin: 0 auto; 
	border-radius: 50%; 
	position: relative; 
} 
 
.a-z-hidden { 
	background: url(https://i.imgur.com/nBI2vJj.png) no-repeat center; 
} 
 
.a-z-hidden { 
	color: #6b83e2; 
	display: none; 
	width: 48px; 
	height: 48px; 
	margin: 0 auto; 
	opacity: 0.3; 
	border-radius: 50%; 
	position: relative; 
} 
 
.vk > a { 
	background: url(https://i.imgur.com/Mo1SCNB.png) no-repeat center; 
} 
 
.telegram > a { 
	background: url(https://i.imgur.com/IRdCiwG.png) no-repeat center; 
} 
 
.vk > a:hover, 
.telegram > a:hover { 
	opacity: 1; 
	background-color:  #385ce2; 
} 
 
.sidebar-bottom { 
	display: block; 
	position: absolute; 
	left: 0; 
	right: 0; 
	bottom: 0; 
} 
 
.content { 
	width: 100%; 
	height: 100%; 
	position: relative; 
} 
 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0-modified | 20110126 
   License: none (public domain) 
*/ 
 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
  margin: 0; 
	padding: 0; 
	border: 0; 
	font-size: 100%; 
	font: inherit; 
	vertical-align: baseline; 
} 
 
/* make sure to set some focus styles for accessibility */ 
:focus { 
    outline: 0; 
} 
 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
	display: block; 
} 
 
body { 
	line-height: 1; 
} 
 
ol, ul { 
	list-style: none; 
} 
 
blockquote, q { 
	quotes: none; 
} 
 
blockquote:before, blockquote:after, 
q:before, q:after { 
	content: ''; 
	content: none; 
} 
 
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
} 
 
input[type=search]::-webkit-search-cancel-button, 
input[type=search]::-webkit-search-decoration, 
input[type=search]::-webkit-search-results-button, 
input[type=search]::-webkit-search-results-decoration { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
} 
 
input[type=search] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
} 
 
textarea { 
    overflow: auto; 
    vertical-align: top; 
    resize: vertical; 
} 
 
/** 
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 
 */ 
 
audio, 
canvas, 
video { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    max-width: 100%; 
} 
 
/** 
 * Prevent modern browsers from displaying `audio` without controls. 
 * Remove excess height in iOS 5 devices. 
 */ 
 
audio:not([controls]) { 
    display: none; 
    height: 0; 
} 
 
/** 
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 
 * Known issue: no IE 6 support. 
 */ 
 
[hidden] { 
    display: none; 
} 
 
/** 
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 
 *    `em` units. 
 * 2. Prevent iOS text size adjust after orientation change, without disabling 
 *    user zoom. 
 */ 
 
html { 
    font-size: 100%; /* 1 */ 
    -webkit-text-size-adjust: 100%; /* 2 */ 
    -ms-text-size-adjust: 100%; /* 2 */ 
} 
 
/** 
 * Address `outline` inconsistency between Chrome and other browsers. 
 */ 
 
a:focus { 
    outline: thin dotted; 
} 
 
/** 
 * Improve readability when focused and also mouse hovered in all browsers. 
 */ 
 
a:active, 
a:hover { 
    outline: 0; 
} 
 
/** 
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 
 * 2. Improve image quality when scaled in IE 7. 
 */ 
 
img { 
    border: 0; /* 1 */ 
    -ms-interpolation-mode: bicubic; /* 2 */ 
} 
 
/** 
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 
 */ 
 
figure { 
    margin: 0; 
} 
 
/** 
 * Correct margin displayed oddly in IE 6/7. 
 */ 
 
form { 
    margin: 0; 
} 
 
/** 
 * Define consistent border, margin, and padding. 
 */ 
 
fieldset { 
    border: 1px solid #c0c0c0; 
    margin: 0 2px; 
    padding: 0.35em 0.625em 0.75em; 
} 
 
/** 
 * 1. Correct color not being inherited in IE 6/7/8/9. 
 * 2. Correct text not wrapping in Firefox 3. 
 * 3. Correct alignment displayed oddly in IE 6/7. 
 */ 
 
legend { 
    border: 0; /* 1 */ 
    padding: 0; 
    white-space: normal; /* 2 */ 
    *margin-left: -7px; /* 3 */ 
} 
 
/** 
 * 1. Correct font size not being inherited in all browsers. 
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 
 *    and Chrome. 
 * 3. Improve appearance and consistency in all browsers. 
 */ 
 
button, 
input, 
select, 
textarea { 
    font-size: 100%; /* 1 */ 
    margin: 0; /* 2 */ 
    vertical-align: baseline; /* 3 */ 
    *vertical-align: middle; /* 3 */ 
} 
 
/** 
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in 
 * the UA stylesheet. 
 */ 
 
button, 
input { 
    line-height: normal; 
} 
 
/** 
 * Address inconsistent `text-transform` inheritance for `button` and `select`. 
 * All other form control elements do not inherit `text-transform` values. 
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 
 * Correct `select` style inheritance in Firefox 4+ and Opera. 
 */ 
 
button, 
select { 
    text-transform: none; 
} 
 
/** 
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 
 *    and `video` controls. 
 * 2. Correct inability to style clickable `input` types in iOS. 
 * 3. Improve usability and consistency of cursor style between image-type 
 *    `input` and others. 
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 
 *    Known issue: inner spacing remains in IE 6. 
 */ 
 
button, 
html input[type="button"], /* 1 */ 
input[type="reset"], 
input[type="submit"] { 
    -webkit-appearance: button; /* 2 */ 
    cursor: pointer; /* 3 */ 
    *overflow: visible;  /* 4 */ 
} 
 
/** 
 * Re-set default cursor for disabled elements. 
 */ 
 
button[disabled], 
html input[disabled] { 
    cursor: default; 
} 
 
/** 
 * 1. Address box sizing set to content-box in IE 8/9. 
 * 2. Remove excess padding in IE 8/9. 
 * 3. Remove excess padding in IE 7. 
 *    Known issue: excess padding remains in IE 6. 
 */ 
 
input[type="checkbox"], 
input[type="radio"] { 
    box-sizing: border-box; /* 1 */ 
    padding: 0; /* 2 */ 
    *height: 13px; /* 3 */ 
    *width: 13px; /* 3 */ 
} 
 
/** 
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 
 *    (include `-moz` to future-proof). 
 */ 
 
input[type="search"] { 
    -webkit-appearance: textfield; /* 1 */ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; /* 2 */ 
    box-sizing: content-box; 
} 
 
/** 
 * Remove inner padding and search cancel button in Safari 5 and Chrome 
 * on OS X. 
 */ 
 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration { 
    -webkit-appearance: none; 
} 
 
/** 
 * Remove inner padding and border in Firefox 3+. 
 */ 
 
button::-moz-focus-inner, 
input::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 
 
/** 
 * 1. Remove default vertical scrollbar in IE 6/7/8/9. 
 * 2. Improve readability and alignment in all browsers. 
 */ 
 
textarea { 
    overflow: auto; /* 1 */ 
    vertical-align: top; /* 2 */ 
} 
 
/** 
 * Remove most spacing between table cells. 
 */ 
 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
 
html, 
button, 
input, 
select, 
textarea { 
    color: rgb(59,173,227); 
} 
 
 
::-moz-selection { 
    background: #b3d4fc; 
    text-shadow: none; 
} 
 
::selection { 
    background: #b3d4fc; 
    text-shadow: none; 
} 
 
img { 
    vertical-align: middle; 
} 
 
fieldset { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 
 
textarea { 
    resize: vertical; 
} 
 
.chromeframe { 
    margin: 0.2em 0; 
    background: #ccc; 
    color: #000; 
    padding: 0.2em 0; 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content="width=device-width"> 
	<title>Ultimate Shop</title> 
	<link href="css/reset.css" 			rel="stylesheet"> 
	<link href="css/main.css" 			rel="stylesheet"> 
	<link href="css/adaptive.css" 		rel="stylesheet"> 
	<link href="css/tooltip.css" 		rel="stylesheet"> 
</head> 
<body> 
	<div class="main-container"> 
		<div class="sidebar"> 
			<div class="logo"> 
				<a href="/"> 
					<img src="https://i.imgur.com/CKxzxLn.png"> 
				</a> 
			</div> 
			<nav> 
				<ul> 
				</ul> 
				<ul> 
					<li class="rules"> 
						<a href="#" data-tooltip="Правила" data-tooltip-location="right"></a> 
					</li> 
				</ul> 
				<ul class="filters"> 
					<li class="filter-hidden visible"></li> 
					<li class="a-z-background-hidden"> 
						<div class="a-z-hidden"></div> 
					</li> 
				</ul> 
<!-- 				<ul> 
					<li> 
						<input type="number" id="input-range-current-value" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="4"> 
						<input type="range" class="range pink" min="0" max="9999" value="9999"> 
					</li> 
				</ul> --> 
				<ul class="sidebar-bottom"> 
					<li class="vk"> 
						<a href="#" data-tooltip="Вконтакте" data-tooltip-location="right"></a> 
					</li> 
					<li class="telegram"> 
						<a href="#" data-tooltip="Телеграм" data-tooltip-location="right"></a> 
					</li> 
				</ul> 
			</nav> 
		</div> 
		<div class="content"> 
		</div> 
	</div> 
</body> 
</html>

html { 
  overflow: scroll; 
  overflow-x: hidden; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #181f4b; 
  font-family: 'Roboto', sans-serif; 
  font-size: 1.2em; 
  color: #969dcd; 
} 
 
::-webkit-scrollbar { 
  width: 0px; 
  background: transparent; 
} 
 
::-webkit-scrollbar-thumb { 
  background: #FF0000; 
} 
 
.unselectable { 
  user-select: none; 
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
} 
 
.main-container { 
  height: 100%; 
  overflow-x: hidden; 
} 
 
.sidebar { 
  position: fixed; 
  left: 0px; 
  top: 0px; 
  bottom: 0px; 
  background: linear-gradient(to right, #2c58dd, #2a44c8); 
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); 
  padding: 30px 0 30px 0; 
  z-index: 1; 
} 
 
.logo { 
  display: flex; 
  width: 100%; 
  justify-content: center; 
  align-items: center; 
} 
 
.logo img { 
  width: 40px; 
} 
 
nav { 
  margin-top: 50px; 
} 
 
.sidebar>nav>ul:first-child, 
.sidebar>nav>ul:nth-child(2) { 
  margin-bottom: 15px; 
} 
 
.sidebar>nav>ul>li>a { 
  color: #6b83e2; 
  display: block; 
  width: 48px; 
  height: 48px; 
  margin: 0 auto; 
  opacity: 0.3; 
  border-radius: 50%; 
  position: relative; 
} 
 
.personal-office { 
  margin-bottom: 3px; 
} 
 
.sidebar>nav>ul>.personal-office>a { 
  opacity: 1; 
} 
 
.personal-office>a>img:hover { 
  transition: 1s; 
  transform: rotateZ(360deg); 
} 
 
.account_avatar_image { 
  width: 48px; 
  border-radius: 50%; 
  display: block; 
} 
 
.sing-in>a { 
  background: url(/images/sing-in.png) no-repeat center; 
} 
 
.sing-out>a { 
  background: url(https://i.imgur.com/YwT5mO8.png) no-repeat center; 
} 
 
.rules>a { 
  background: url(https://i.imgur.com/N5pzODb.png) no-repeat center; 
} 
 
.sing-in>a:hover, 
.sing-out>a:hover, 
.rules>a:hover { 
  opacity: 1; 
  background-color: #385ce2; 
} 
 
.filters { 
  flex-wrap: wrap; 
} 
 
.filter-hidden:hover .a-z-background-hidden 
/* .filters:hover .a-z-hidden */ 
 
{ 
  display: block; 
} 
 
.filter-hidden { 
  background: url(https://i.imgur.com/regS5LD.png) no-repeat center; 
} 
 
.filter-hidden { 
  color: #6b83e2; 
  display: none; 
  width: 48px; 
  height: 48px; 
  margin: 0 auto; 
  opacity: 0.3; 
  border-radius: 50%; 
  position: relative; 
} 
 
.filter-hidden>ul { 
  display: flex; 
  position: absolute; 
  top: 0; 
  left: 48px; 
  padding: 0 5px; 
} 
 
.filter-hidden>ul li { 
  margin: 0 5px; 
} 
 
.filter-hidden:hover { 
  cursor: pointer; 
  opacity: 1; 
  background-color: #385ce2; 
} 
 
.filter-hidden.visible { 
  display: block; 
} 
 
.a-z-background-hidden { 
  background: linear-gradient(to right, #2c58dd, #2a44c8); 
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); 
  display: none; 
  width: 48px; 
  height: 48px; 
  margin: 0 auto; 
  border-radius: 50%; 
  position: relative; 
} 
 
.a-z-hidden { 
  background: url(https://i.imgur.com/nBI2vJj.png) no-repeat center; 
} 
 
.a-z-hidden { 
  color: #6b83e2; 
  /* display: none; */ 
  width: 48px; 
  height: 48px; 
  margin: 0 auto; 
  opacity: 0.3; 
  border-radius: 50%; 
  position: relative; 
} 
 
.vk>a { 
  background: url(https://i.imgur.com/Mo1SCNB.png) no-repeat center; 
} 
 
.telegram>a { 
  background: url(https://i.imgur.com/IRdCiwG.png) no-repeat center; 
} 
 
.vk>a:hover, 
.telegram>a:hover { 
  opacity: 1; 
  background-color: #385ce2; 
} 
 
.sidebar-bottom { 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
} 
 
.content { 
  width: 100%; 
  height: 100%; 
  position: relative; 
} 
 
 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0-modified | 20110126 
   License: none (public domain) 
*/ 
 
html, 
body, 
div, 
span, 
applet, 
object, 
iframe, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre, 
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code, 
del, 
dfn, 
em, 
img, 
ins, 
kbd, 
q, 
s, 
samp, 
small, 
strike, 
strong, 
sub, 
sup, 
tt, 
var, 
b, 
u, 
i, 
center, 
dl, 
dt, 
dd, 
ol, 
ul, 
li, 
fieldset, 
form, 
label, 
legend, 
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td, 
article, 
aside, 
canvas, 
details, 
embed, 
figure, 
figcaption, 
footer, 
header, 
hgroup, 
menu, 
nav, 
output, 
ruby, 
section, 
summary, 
time, 
mark, 
audio, 
video { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  font-size: 100%; 
  font: inherit; 
  vertical-align: baseline; 
} 
 
 
/* make sure to set some focus styles for accessibility */ 
 
:focus { 
  outline: 0; 
} 
 
 
/* HTML5 display-role reset for older browsers */ 
 
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
menu, 
nav, 
section { 
  display: block; 
} 
 
body { 
  line-height: 1; 
} 
 
ol, 
ul { 
  list-style: none; 
} 
 
blockquote, 
q { 
  quotes: none; 
} 
 
blockquote:before, 
blockquote:after, 
q:before, 
q:after { 
  content: ''; 
  content: none; 
} 
 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
} 
 
input[type=search]::-webkit-search-cancel-button, 
input[type=search]::-webkit-search-decoration, 
input[type=search]::-webkit-search-results-button, 
input[type=search]::-webkit-search-results-decoration { 
  -webkit-appearance: none; 
  -moz-appearance: none; 
} 
 
input[type=search] { 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  box-sizing: content-box; 
} 
 
textarea { 
  overflow: auto; 
  vertical-align: top; 
  resize: vertical; 
} 
 
 
/** 
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 
 */ 
 
audio, 
canvas, 
video { 
  display: inline-block; 
  *display: inline; 
  *zoom: 1; 
  max-width: 100%; 
} 
 
 
/** 
 * Prevent modern browsers from displaying `audio` without controls. 
 * Remove excess height in iOS 5 devices. 
 */ 
 
audio:not([controls]) { 
  display: none; 
  height: 0; 
} 
 
 
/** 
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 
 * Known issue: no IE 6 support. 
 */ 
 
[hidden] { 
  display: none; 
} 
 
 
/** 
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 
 *    `em` units. 
 * 2. Prevent iOS text size adjust after orientation change, without disabling 
 *    user zoom. 
 */ 
 
html { 
  font-size: 100%; 
  /* 1 */ 
  -webkit-text-size-adjust: 100%; 
  /* 2 */ 
  -ms-text-size-adjust: 100%; 
  /* 2 */ 
} 
 
 
/** 
 * Address `outline` inconsistency between Chrome and other browsers. 
 */ 
 
a:focus { 
  outline: thin dotted; 
} 
 
 
/** 
 * Improve readability when focused and also mouse hovered in all browsers. 
 */ 
 
a:active, 
a:hover { 
  outline: 0; 
} 
 
 
/** 
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 
 * 2. Improve image quality when scaled in IE 7. 
 */ 
 
img { 
  border: 0; 
  /* 1 */ 
  -ms-interpolation-mode: bicubic; 
  /* 2 */ 
} 
 
 
/** 
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 
 */ 
 
figure { 
  margin: 0; 
} 
 
 
/** 
 * Correct margin displayed oddly in IE 6/7. 
 */ 
 
form { 
  margin: 0; 
} 
 
 
/** 
 * Define consistent border, margin, and padding. 
 */ 
 
fieldset { 
  border: 1px solid #c0c0c0; 
  margin: 0 2px; 
  padding: 0.35em 0.625em 0.75em; 
} 
 
 
/** 
 * 1. Correct color not being inherited in IE 6/7/8/9. 
 * 2. Correct text not wrapping in Firefox 3. 
 * 3. Correct alignment displayed oddly in IE 6/7. 
 */ 
 
legend { 
  border: 0; 
  /* 1 */ 
  padding: 0; 
  white-space: normal; 
  /* 2 */ 
  *margin-left: -7px; 
  /* 3 */ 
} 
 
 
/** 
 * 1. Correct font size not being inherited in all browsers. 
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 
 *    and Chrome. 
 * 3. Improve appearance and consistency in all browsers. 
 */ 
 
button, 
input, 
select, 
textarea { 
  font-size: 100%; 
  /* 1 */ 
  margin: 0; 
  /* 2 */ 
  vertical-align: baseline; 
  /* 3 */ 
  *vertical-align: middle; 
  /* 3 */ 
} 
 
 
/** 
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in 
 * the UA stylesheet. 
 */ 
 
button, 
input { 
  line-height: normal; 
} 
 
 
/** 
 * Address inconsistent `text-transform` inheritance for `button` and `select`. 
 * All other form control elements do not inherit `text-transform` values. 
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 
 * Correct `select` style inheritance in Firefox 4+ and Opera. 
 */ 
 
button, 
select { 
  text-transform: none; 
} 
 
 
/** 
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 
 *    and `video` controls. 
 * 2. Correct inability to style clickable `input` types in iOS. 
 * 3. Improve usability and consistency of cursor style between image-type 
 *    `input` and others. 
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 
 *    Known issue: inner spacing remains in IE 6. 
 */ 
 
button, 
html input[type="button"], 
 
/* 1 */ 
 
input[type="reset"], 
input[type="submit"] { 
  -webkit-appearance: button; 
  /* 2 */ 
  cursor: pointer; 
  /* 3 */ 
  *overflow: visible; 
  /* 4 */ 
} 
 
 
/** 
 * Re-set default cursor for disabled elements. 
 */ 
 
button[disabled], 
html input[disabled] { 
  cursor: default; 
} 
 
 
/** 
 * 1. Address box sizing set to content-box in IE 8/9. 
 * 2. Remove excess padding in IE 8/9. 
 * 3. Remove excess padding in IE 7. 
 *    Known issue: excess padding remains in IE 6. 
 */ 
 
input[type="checkbox"], 
input[type="radio"] { 
  box-sizing: border-box; 
  /* 1 */ 
  padding: 0; 
  /* 2 */ 
  *height: 13px; 
  /* 3 */ 
  *width: 13px; 
  /* 3 */ 
} 
 
 
/** 
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 
 *    (include `-moz` to future-proof). 
 */ 
 
input[type="search"] { 
  -webkit-appearance: textfield; 
  /* 1 */ 
  -moz-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 
  /* 2 */ 
  box-sizing: content-box; 
} 
 
 
/** 
 * Remove inner padding and search cancel button in Safari 5 and Chrome 
 * on OS X. 
 */ 
 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration { 
  -webkit-appearance: none; 
} 
 
 
/** 
 * Remove inner padding and border in Firefox 3+. 
 */ 
 
button::-moz-focus-inner, 
input::-moz-focus-inner { 
  border: 0; 
  padding: 0; 
} 
 
 
/** 
 * 1. Remove default vertical scrollbar in IE 6/7/8/9. 
 * 2. Improve readability and alignment in all browsers. 
 */ 
 
textarea { 
  overflow: auto; 
  /* 1 */ 
  vertical-align: top; 
  /* 2 */ 
} 
 
 
/** 
 * Remove most spacing between table cells. 
 */ 
 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
} 
 
html, 
button, 
input, 
select, 
textarea { 
  color: rgb(59, 173, 227); 
} 
 
::-moz-selection { 
  background: #b3d4fc; 
  text-shadow: none; 
} 
 
::selection { 
  background: #b3d4fc; 
  text-shadow: none; 
} 
 
img { 
  vertical-align: middle; 
} 
 
fieldset { 
  border: 0; 
  margin: 0; 
  padding: 0; 
} 
 
textarea { 
  resize: vertical; 
} 
 
.chromeframe { 
  margin: 0.2em 0; 
  background: #ccc; 
  color: #000; 
  padding: 0.2em 0; 
}

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>Ultimate Shop</title> 
  <link href="css/reset.css" rel="stylesheet"> 
  <link href="css/main.css" rel="stylesheet"> 
  <link href="css/adaptive.css" rel="stylesheet"> 
  <link href="css/tooltip.css" rel="stylesheet"> 
</head> 
 
<body> 
  <div class="main-container"> 
    <div class="sidebar"> 
      <div class="logo"> 
        <a href="/"> 
          <img src="https://i.imgur.com/CKxzxLn.png"> 
        </a> 
      </div> 
      <nav> 
        <ul> 
        </ul> 
        <ul> 
          <li class="rules"> 
            <a href="#" data-tooltip="Правила" data-tooltip-location="right"></a> 
          </li> 
        </ul> 
        <ul class="filters"> 
          <li class="filter-hidden visible"> 
            <ul> 
              <li class="a-z-background-hidden"> 
                <div class="a-z-hidden"></div> 
              </li> 
            </ul> 
          </li> 
 
        </ul> 
        <!-- 				<ul> 
					<li> 
						<input type="number" id="input-range-current-value" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="4"> 
						<input type="range" class="range pink" min="0" max="9999" value="9999"> 
					</li> 
				</ul> --> 
        <ul class="sidebar-bottom"> 
          <li class="vk"> 
            <a href="#" data-tooltip="Вконтакте" data-tooltip-location="right"></a> 
          </li> 
          <li class="telegram"> 
            <a href="#" data-tooltip="Телеграм" data-tooltip-location="right"></a> 
          </li> 
        </ul> 
      </nav> 
    </div> 
    <div class="content"> 
    </div> 
  </div> 
</body> 
 
</html>