наследовать свойства, а затем изменить некоторые на конкретном сайте (CSS)

Question

У меня есть три меню на этом тестовом веб-сайте . Я учу CSS и пытаюсь menu2 & menu3 до inherit all properties from menu class. Второй выглядит немного по-другому и не кликабелен. Я доволен третьим, просто хочу сделать его горизонтальным и немного изменить его положение.

Может ли кто-нибудь сказать мне

• почему второе меню недоступно для нажатия?
• как я могу сделать третье меню вертикальным? Я думал, что display: block; для li 3-го меню поможет, но я не знаю пути css для этого li.

Answer 1

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

Третье меню не вертикальное, потому что в списке есть float: left

Используйте следующую CSS для исправления

.menu3 li
{
float:none;
}
.menu3
{
position:absolute;
}

Вам нужно будет установить левый / верхний параметры для .menu3, чтобы разместить его на странице, где вы хотите.

Если вы используете Firefox Firebug, вы должны установить веб-разработчик и расширения Firebug. Если вы используете Safari, вы можете включить инструменты разработчика, если вы используете Internet Explorer 8, вы также можете включить инструменты разработчика. (Firebug - лучший на мой взгляд).

Answer 2

Второе меню недоступно для щелчка, потому что третье меню закрывает его. Один из способов исправить это удалить position: relative из .menu.

Путь для <li> в третьем меню, например, .menu3 li, но я не совсем уверен, что вы имеете в виду, делая его вертикальным. Я надеюсь, что вы можете найти способ с этой информацией.

Небольшая подсказка ... Такой инструмент, как FireBug for Firefox, полезен для пробной версии CSS и ошибок.