Проблема с меню на css

[uinnir]

Добрый день!

Пытаюсь решить одну проблемку, но видимо знаний мало, не могу разобраться уже который день.
Подскажите, пожалуйста, как можно сделать так:

Т.е., мне надо подвинуть меню к зеленой линии. Как можно убрать пространство, отмеченное оранжевым?
Ссылка: http://www.ik-architect.com/index/0-22

Проблема в том, что там выпадающее меню на css, под "Портфолио" и походу из-за него там образуется пространство. У меня не достаточно знаний css, не могу разобраться. Подскажите, пожалуйста! Очень буду благодарна!)))

Спасибо

[MahaVishnu]

У списков по умолчанию имеется отступ. следовательно, от него надо избавиться, например, так -
padding: 0px;
(у <UL>)

[uinnir]

Вот такой у меня css, что надо подправить? Padding уже стоит вроде 0...

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
 font-weight:bold;
 font-size:14px;
 display: inline;
 width:40;
 }

ul.dropdown {
 vertical-align: baseline; 
 position: relative;
 z-index: 597;
 float: none;
 font-weight:bold;
 font-size:14px;
 display: inline;
 
}

ul.dropdown li {
 padding: 0 0 0 0; 
 float: none;
 vertical-align: bottom;
 font-weight:bold;
 font-size:14px;
 list-style: none;
 display: inline;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
 font-weight:bold;
 font-size:14px;
 display: inline;
 
}

ul.dropdown ul {
 line-height: 2; 
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: -40;
 z-index: 598;
 width: 100%;
 font-weight:bold;
 font-size:14px;
 display: inline;
 
}

ul.dropdown ul li {
 float: none;
 font-weight:bold;
 font-size:14px;
 display: inline;
 
}

ul.dropdown ul ul {
 top: 20px;
 left: -30px;
 font-weight:bold;
 font-size:14px;
 display: inline;
 
}

ul.dropdown li:hover > ul {
 visibility: visible;
 font-weight:bold;
 font-size:14px;
 display: inline;
 
}

[MahaVishnu]

у вас два раза заданы параметры для ul.dropdown.

попробуйте второй абзац изменить
ul.dropdown {
padding:0px;
vertical-align: baseline;
position: relative;
z-index: 597;
float: none;
font-weight:bold;
font-size:14px;
display: inline;

}

[uinnir]

Да! Все работает! Большое, нет, ОГРОМНОЕ СПАСИБО ВАМ)))

[MahaVishnu]

Сообщение от uinnir

Да! Все работает! Большое, нет, ОГРОМНОЕ СПАСИБО ВАМ)))

Вообще, нельзя допускать дублирования классов. Если в CSS указаны одинаковые классы, то браузеры будут обрабатывать тот, что находится ниже. В вашем случае, это второй абзац, в котором и не было задано параметра padding. Потому браузер, игнорируя верхний абзац (где тоже есть ul.dropdown), читает абзац, что ниже и не понимает, что отступа делать-то и не надо.

[uinnir]

Вот этого я и не знала. Спасибо!

[Naive]

Сообщение от MahaVishnu

Вообще, нельзя допускать дублирования классов. Если в CSS указаны одинаковые классы, то браузеры будут обрабатывать тот, что находится ниже. В вашем случае, это второй абзац, в котором и не было задано параметра padding. Потому браузер, игнорируя верхний абзац (где тоже есть ul.dropdown), читает абзац, что ниже и не понимает, что отступа делать-то и не надо.

Глупости, я могу написать так:

.b-myblock{position:absolute;}
.b-myblock{top:0;}
.b-myblock{right:0;}
.b-myblock{bottom:10px;}
.b-myblock{left:0;}
.b-myblock{background:rgba(0,0,0,.5);}
.b-myblock{box-shadow:inset 0 0 4px #000;}
.b-myblock{color:#fff;}
.b-myblock{padding:3em 2em;}

и все стили применятся.
Но вот если я напишу после

.b-myblock{padding-bottom:4em;}

то он частично перекроет стиль из верхнего блока, и итоговый padding будет "3em 2em 4em";

[MahaVishnu]

Сообщение от Naive

Глупости, я могу написать так:

.b-myblock{position:absolute;}
.b-myblock{top:0;}
.b-myblock{right:0;}
.b-myblock{bottom:10px;}
.b-myblock{left:0;}
.b-myblock{background:rgba(0,0,0,.5);}
.b-myblock{box-shadow:inset 0 0 4px #000;}
.b-myblock{color:#fff;}
.b-myblock{padding:3em 2em;}

и все стили применятся.
Но вот если я напишу после

.b-myblock{padding-bottom:4em;}

то он частично перекроет стиль из верхнего блока, и итоговый padding будет "3em 2em 4em";

согласен. немного неправильно выразился. виноват.
но тогда вопрос - почему в этом примере
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
font-weight:bold;
font-size:14px;
display: inline;
width:40;
}

ul.dropdown {
vertical-align: baseline;
position: relative;
z-index: 597;
float: none;
font-weight:bold;
font-size:14px;
display: inline;

}

браузер не подхватывает стиль верхнего ,
ul.dropdown, ul.dropdown li,
ul.dropdown ul {
padding: 0;
}

а начинает реагировать лишь на нижестоящий блок ul.dropdown, в котором padding не указан?