Блог

Главная - Вопросы по программированию - Проблема с выпадающим меню CSS

Проблема с выпадающим меню CSS

#html #css

#HTML #css

Вопрос:

Я создал выпадающее меню CSS наhttp://elankeeran.com/test/dropdown.html, но я сталкиваюсь с проблемой при наведении курсора мыши. Вкладка «Главная» работает нормально. И я хочу удалить ширину для <ul id="menu" style="width:35px;"> любой идеи, как удалить ширину.

Верхняя граница «left Home» отсутствует, как показано на изображении ниже:
введите описание изображения здесь

Как бы я мог это исправить?

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

1. Кстати, у вас есть #menu { padddig:0px; } . Вы должны это исправить. Кроме того, вы используете id="menu" дважды. id предполагается, что файлы s уникальны. Вы должны переключиться на class="menu" и .menu .

2. спасибо за информацию, которую я здесь делаю, например, поэтому я скопировал тот же тег UL. Я перейду на class

Ответ №1:

Виновником является z-index:-1 в .dropdown_2columns css. Если вы удалите это, вы получите свои границы обратно. Была ли причина, по которой вы установили z-index равным -1?

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

1. если я удалю, это будет выглядеть как граница окна. Но я хочу, как вкладка «Главная»

2. Итак, в основном то, что вы делаете, скрывает перекрывающуюся часть границы, перемещая ее за #menu div, правильно? В этом случае вы можете обойти это, изменив ширину, установленную в элементе меню с 138px на 108px , и удалив margin-right:30px from #menu li . Но это может показаться очень хакерским способом достижения этой цели, я бы начал с чистого использования меню meyer’s css, а затем добавил div вокруг тега main a , который я бы использовал, чтобы скрыть верхнюю часть границы подменю.

3. Спасибо! проблема с верхней границей в некотором роде в порядке, но предположим, что содержимое вкладки снова увеличивается, верхняя граница не выровнена…. «ушел из дома» Я не могу выбрать элемент выпадающего списка при наведении курсора мыши на элемент, который он скрывает… Я не знаю, почему?

4. Я подозреваю, что это снова из-за z-индекса -1. Как я уже сказал, вы, вероятно, захотите начать с меню заново. Там много кода, который не должен быть нужен. Но я думаю, вы могли бы обойти это, удалив z-индекс в этом и установив высокий z-индекс в #menu.

5. Нет, извините, высокий z-индекс не будет работать. Я забыл, что подменю является дочерним элементом этого элемента.

Ответ №2:

Если width применяется единственный стиль, вы можете удалить весь style атрибут, $('#menu').removeAttr('style'); отредактировав: упс, я не знаю, используете ли вы jQuery.

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

1. Это было бы решение на jQuery, а не на html или css.

2. Верно, я понял, что он не упомянул jQuery. Для меня очевидно, что все используют jQuery 🙂

3. но я ищу решение для css html

Ответ №3:

Я думаю, вы можете просто сделать:

 delete document.getElementById("menu").style.width ;

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

1. Ваш ответ не имеет для меня смысла. Можете ли вы прояснить это?

2. Он хотел знать, как удалить свойство «width», чтобы оно больше не применялось. Вот как вы удаляете свойство в JS.

3. delete document.getElementById("menu").style.width не будет работать. Чтобы сбросить свойство CSS width до его начального значения, вы хотите document.getElementById("menu").style.width = 'auto' .

4. не приведет ли удаление свойства к тому же эффекту? Однако ваше решение лучше.

5. Нет. Также существует тот факт, что это помечено тегом html и css , и никакой другой JavaScript на странице не используется, поэтому вы должны предположить «нет JavaScript».