#html #css
#HTML #css
Вопрос:
У меня есть выпадающее меню для моего сайта, и я заметил, что доступны только сами слова, а не весь блок, в который помещено слово (ссылка).
Я уже добавил display: block; к элементу a, но, похоже, это работает только по горизонтали, но не по всему блоку.
Надеюсь, вы сможете мне помочь! И заранее благодарю вас!
Вот код css:
#dropdownmenu a {
color:inherit !important;
display:block;
text-decoration:none !important}
#dropdownmenu {
width:1050px;
background:#137cd7;
z-index:2;
position:relative }
#dropdownmenu ul {
text-align:left;
display:inline;
margin:0px;
padding:10px 4px 25px 0;
list-style:none }
#dropdownmenu ul li {
display:inline-block;
margin-right:10px;
position:relative;
padding:15px 15px 14px;
cursor:pointer;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s;
color:#fff }
#dropdownmenu ul li:hover {
background-color:#ffffff;
color:#137cd7 }
@media screen and (-webkit-min-device-pixel-ratio:0)
#dropdownmenu ul li ul {
top:44px !important}
#dropdownmenu ul li ul {
padding:0px;
position:absolute;
top:47px;
left:0px;
width:170px;
display:none;
opacity:0;
visibility:hidden;
-webkit-transiton:opacity 0.2s;
-moz-transition:opacity 0.2s;
-ms-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
-transition:opacity 0.2s }
#dropdownmenu ul li ul li {
background-color:#fff;
display:block;
color:#222;
border-left:1px solid #ccc;
border-right:1px solid #ccc;}
#dropdownmenu ul li ul li:hover {
color:#137cd7;
background:#222;
text-decoration:none !important }
#dropdownmenu ul li:hover ul {
display:block;
opacity:1;
visibility:visible;
border-bottom:1px solid #ccc; }
И HTML:
<div id="dropdownmenu">
<ul>
<li>
<a href="/">Home</a></li>
<li>
<a href="/">Menu 1</a>
<ul>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
</ul>
</li>
<li>
<a href="/">Menu 2</a>
<ul>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
<li>
<a href="/">Submenu</a></li>
</ul>
</li>
<li>
<a href="/contact">Contact</a>
<ul>
<li>
<a href="/contact"><img alt="" src="/files/19731/editor/images/support(1).JPG" style="width: 140px; height: 140px; border-width: 0px; border-style: solid;" /></a></li>
<li>
amp;nbsp;</li>
</ul>
</li>
</ul>
Спасибо всем!
Спасибо за ответ! Это мне очень помогло! Теперь все работает отлично!
Комментарии:
1. Вам не нужно включать весь ваш код. Просто укажите нам соответствующие части, которые вызывают упомянутую вами проблему.
2. Я не могу сказать вам, сколько раз мне выгрызали задницу за то, что я не предоставил весь свой код…
Ответ №1:
На изображении ниже вы можете увидеть привязку выпадающего списка синим цветом, а заполнение li — зеленым. Когда вы нажимаете на зеленую область, браузер не будет следовать за привязкой, что является нормальным поведением.
Чтобы исправить это, удалите заполнение li и примените его к привязке. Поскольку якоря являются встроенными элементами, вам придется отображать их как блок, чтобы применить заполнение.
#dropdownmenu a {
padding:15px 15px 14px;
display: block;
}
Я также внес некоторые улучшения в CSS, вы можете взглянуть на обновленную скрипку