пользовательское встроенное горизонтальное меню html5

#css #html #menu #inline

#css #HTML #меню #встроенное

Вопрос:

[править] Пожалуйста, обратите внимание, что это не повторяющийся поток, хотя он вращается вокруг той же темы, что и предыдущий. [/править]

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

В принципе, я делал это раньше, хотя, как я выяснил, было несколько сомнительных подходов, которые я должен был исправить сейчас. Среди прочего, я больше не использую display: table-cell, а вместо этого display: inline-block.

Так в чем же тогда проблема? что ж, я хочу достичь некоторой степени совершенства, и поскольку я легко запутываюсь, мне бы очень хотелось, чтобы кто-нибудь из вас просмотрел его и передал свои комментарии и предложения. Может быть, потратьте несколько минут, чтобы оказать мне услугу по приведению в порядок CSS и т.д.

Теперь у меня нет никаких ожиданий, и я понимаю, что я не единственный, кто в этом нуждается, но если у вас есть время, я буду очень благодарен. Вот ссылка на рабочий пример. http://jsfiddle.net/7fD4S /

HTML должен быть в порядке, хотя меня немного раздражает, что я не могу представить список, вероятно, из-за того, как это влияет на свойство встроенного блока, но я могу с этим смириться.

Что касается CSS, как уже объяснялось, я легко путаю себя. Я думаю, что CSS нуждается в некоторой очистке, но, честно говоря, я не могу с этим справиться.

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

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

Ну, вот и все.

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

Редактировать: Обновленный пример:http://jsfiddle.net/7fD4S/1 /

Редактировать: Обновленный пример:http://jsfiddle.net/7fD4S/2 Изменил положение сверху с 21 на 20 пикселей, чтобы избежать разрыва.

Комментарии:

1. Если вы пишете дубликат, по крайней мере, не говорите, что делаете, но постарайтесь сохранить это в секрете.

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

Ответ №1:

Единственное, что я действительно заметил, это то, что вам следует изменить:

 header div {
    top: 21px;
}
  

Для

 header div {
    top: 20px;
}
  

В противном случае возникает мертвая зона @ граница в 1 пиксель, которая, похоже, не запускает эффект:hover и, таким образом, делает его прерывистым.

Комментарии:

1. Я уже рассматривал это, поскольку я тоже думал, что это может быть проблемой, однако, похоже, этого нет в firefox 4. Пожалуйста, сообщите мне, какой браузер вы используете?

2. просто протестируйте в IE9, и он столкнулся с проблемой, которую вы описываете, поэтому теперь она изменилась. спасибо за отзыв.