помогите разобраться в коде

Общее
1

body {
margin: 0;
padding: 0;
font-family: “PT Sans”, sans-serif;
color: pink;
text-align: center;
}

.wrapper {
width: px;
margin: 0 auto;
box-shadow: 0 0 2px #ccccc;
}

.header,
.fotter {
padding: 10px;
background: red;
}

.siderbar {
float: left;
width: 150px;
min-height: 500px;
padding: 10px;
color: white;
background: blue;
}

.content {
min-height: 450px;
margin-left: 170px;
padding: 10px;
color: white;
background: gray;
}

.clearfix:after {
display: table;
content: “”;
clear: both;
}

.main-menu {
list-style: none;
margin: 0;
padding: 0;
}

.main-menu a {
display: inline-block;
padding: 10px 10px;
border-left: 0px solid green;
text-decoration: none;
}
/.main-menu a:link {
color: green;
}
.main-menu a:visited{
color: blue;
}
.main-menu a:active {
color: red;
}/
.main-menu li:hover {
background: yellow;
text-decoration: underline;
}

.main-menu li {
position: relative;
display: inline-block;
padding-right: 30px;
}

.main-menu .sub-menu {
position: absolute;
top: 30px;
left: 60px;
z-index: 100;
display: none;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
background: pink;
}

.main-menu > li:hover .sub-menu {
display: block;
}

2

Не закрыли теги </a>.

Лишний знак < в начале.

3

спасибо, но так и не выпадает подменю

4

Зачем html убрали? Как проверить теперь?

5 
<body>
	<div class="wrapper">
		<div class="header"></div>
		<div class="main-menu">
			<ul>
				<li><a href="main-page">Головна</a></li>
				<li><a href="history">Історія закладу</a></li>
				<li><a href="stracture">Дитячі групи закладу</a>
					<ul class="sub-menu">
						<li><a href="malvi">Група <q>Мальви</q></a></li>
						<li><a href="romashka">Група <q>Ромашка</q></a></li>
						<li><a href="sonishnyk">Група <q>Соняшник</q></a></li>
						<li><a href="synuchka">Група <q>Суничка</q></a></li>
						<li><a href="iasli">Ясельна група</a></li>
					</ul>
				</li>
				<li><a href="comment">Відгуки</a></li>
				<li><a href="contacts">Контакти</a></li>
			</ul>
		</div>
		<h1>Зробимо щасливе дитинство разом</h1>
		<div class="content-container clearfix">
			<div class="siderbar">
				<p>fix</p>
			</div>
			<div class="content">
				<p>no fix</p>
			</div>
		</div>
		<div class="fotter">fotter</div>
	</div>
	<img src="">
</body>
6

Селектор неправильно написали. Вот так будет работать:
.main-menu li:hover .sub-menu {
display: block;
}

1 лайк
7

спасибо, Ineska, радости не передать:):yum:

8

Подскажите пожалуйста почему блок прижимается к другому блоку ?Мне нужно задать внешний отступ сверху для блока .header ,а вместо этого блок хедер прижимается к блоку main и отступ увеличивается у блока ,.main

Имя файла изображения1366×768 55.3 KB

Безымянный.png1358×592 25.2 KB

Вот код
CSS:
.main{
width: 1000px;
height: 700px;
background-image: url(…/img/background.png);
}

.header{
width: 201px;
height: 40px;
margin:50px 20px 0 0;
background-color: deepskyblue;
border-radius: 10px;
}

.header {
padding: 25px 31px 16px 30px;
text-decoration: none;

}

9

Это эффект выпадения внешних отступов. Напишите вместо margin у .header, padding для .main.