Проблемы с раскрывающимся меню UL

У меня есть две проблемы с моим выпадающим меню, одна из которых связана с ссылками, а другая связана с проблемами IE7. Кодекс следует за вопросы, и в обоих случаях я пытаюсь избежать JavaScript (ключевой частью проекта)Проблемы с раскрывающимся меню UL

Я успешно выдвигая на первый план текст ссылки, когда я зависать, в том числе несколько выше пикселей, ниже и слева & справа. Тем не менее, единственная часть выделенной области, которая доступна для кликов (например, где я могу получить доступ к гиперссылке), - это текст, и я хочу иметь возможность выделить целую подсветку, отступы и текст. Я делал это раньше, но я в замешательстве с текущим кодом о том, как его исправить. Кто-нибудь может мне помочь?
Используя тот же раскрывающийся список, все работает нормально, за исключением IE7. Некоторые пользователи IE7 жаловались, что после того, как они подсвечивают пункт меню и выпадающее меню, они только опускаются примерно на 2-й элемент до того, как выпадающее меню исчезает, и это делается для каждого раскрывающегося списка. Я знаю, что это проблема с IE7, но мне нужно работать для этого. Любая помощь вообще?

Мой код CSS:

ul       { list-style: none; } 
p       { margin: 8px 0; } 
ul.dropdown     { list-style-type:none;height:24px; top:2px; padding:0px 0px 0px 0px;;margin:0px 0px 0 1px;vertical-align:bottom; color:#000000; position: relative; } 
ul.dropdown a:hover   { color: #000; } 
ul.dropdown a:active  { color: #ffa500; } 
ul.dropdown li    { float: left; position:relative; vertical-align:middle; background-position:0 -40px; padding: 2px 4px 5px 2px; margin-right:6px;} 
ul.dropdown li a   { display: block; padding: 0px 0px; color: #222; text-decoration:none; vertical-align:middle; width:100%;} 
ul.dropdown li:last-child a { border-right: none; } 
ul.dropdown li.hover, 
ul.dropdown li:hover  { background: #F3D673; color: black; position: relative; } 
ul.dropdown li.hover a  { color: black; } 

ul.dropdown ul    { width: 152px; visibility: hidden; position: absolute; top: 100%; left: -40px; z-index:60;} 
ul.dropdown ul li   { font-weight: normal; background: #ECEAD8; color: #000; width:100%;/*border-bottom: 1px solid #ccc;*/ float: none; } 
ul.dropdown ul li.nohover { color: black; background: #ECEAD8; position:relative; } 

ul.dropdown ul li a   { border-right: none; width: 100%; display: inline-block; min-height:1.4em;} 

ul.dropdown ul ul   { left:72.7%;top: 0px; width:158px; z-index:50; display:inline-block;} 
ul.dropdown li:hover > ul { visibility: visible; display:block; } 

#arrowRight     { float:right; margin-top:-11px;} 
a.moreItems {background: url(/images/menu/arrow_r.gif) no-repeat right;}

Вот HTML код:

<!DOCTYPE HTML> 
<html> 
<head> 
<title></title> 
<link rel=stylesheet type="text/css" href="menustylesheet.css"> 
</head> 
<body> 
<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td height="25" class="topmenu" bgcolor="##ECEAD8" nowrap> 
<ul class="dropdown"> 
    <li><a href=""><b>Item 1</b> <img src="/images/menu/arrow_d.gif" border="0" height="7" width="7"></a> 
     <ul> 
      <li><a class="moreItems" href="">Item 1-1</a> 
       <ul> 
        <li><a href="">Item 1-1-1</a></li> 
       </ul> 
      </li> 
      <li><a class="moreItems" href="">Item 1-2</a> 
       <ul> 
        <li><a href="">Item 1-2-1</a></li> 
       </ul> 
      </li> 

      <li>Item 1-3 <div style="vertical-align:middle;"><img src="/images/menu/arrow_r.gif" id="arrowRight" border="0"></div> 
       <ul> 
        <li><a href="">Item 1-3-1</a></li> 
        <li><a href="">Item 1-3-2</a></li> 
       </ul> 
      </li> 
      <li><a href="">Item 1-4</a></li> 
      <li><a href="">Item 1-5</a></li> 
    </ul> 
    </li> 
</ul> 

     </td> 
    </tr> 
    <tr><td bgcolor="##c0c0c0" style="height:1px;"></td></tr> 
</table> 
</body> 
</html>

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

источник

2012-01-25 user1100412

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

^Это помогло мне много раз, чтобы найти обходные для IE.

источник

2012-01-25 20:55:04 Hikalea

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

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

http://www.albatrossfonts.com/stack/ulbuttons.html

Я объясню этот код ниже. Вот мой HTML:

<div id="wrapper"> 

    <ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
    </ul> 

</div>

И CSS:

.dropdown 
{ 
    width: 200px; 
    display:block; 
    margin: 200px auto 0 auto; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
} 

.dropdown li a:hover 
{ 
    background-color: #333333; 
}

Обратите внимание, что я объявил: ссылку, а не просто. Я также объявил: посетил, так как я хочу, чтобы состояние посещения было таким же, как и исходное состояние.

В записи .dropdown я просто задал ширину для списка (ul) и правильно отобразил его.

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

В разделе .dropdown li a: link, .dropdown li a: visited, то, что мы по существу делаем, это «заполнение» наших полей списка ссылкой, и так получилось, что мы можем определить ссылку как коробка также. Поэтому я устанавливаю размеры ссылки на тот же размер, что и наши лики (это то, что делает все окно кликабельным). Затем установите отображение и поплавок, а также цвет фона, а также цвет текста или просто «цвет»."

Для того, чтобы получить текст в центре, вы не должны использовать вертикальное выравнивание. Используйте высоту строки и установите ее на ту же высоту, что и ваш элемент li. Это будет центрировать ваш текст в окне по вертикали.

Чтобы контролировать, где текст отображается горизонтально, установите текстовый отступ свойство, используйте выравнивания текста В этом примере я использовал текстовый отступ

Наконец, мы определяем нашу A:... зависать состояние Это важно Помните, что единственное, что вам действительно нужно определить, - это любые свойства, которые действительно меняются. В этом случае цвет фона.

Если вы хотите, чтобы объявление состояния для мыши вниз событие, вы могли бы сделать что-то вроде:

.dropdown li a:active 
{ 
    background-color: #000000; 
    text-indent: 20px; 
}

/////////// Edit ////////////

Вот как вы можете использовать один стиль css для нескольких меню или дочерних меню.

HTML для 2 отдельных ул годов:

<ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
</ul> 

<ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
</ul>

CSS: (остается неизменным, потому что вы назначаете их обоих к классу

.dropdown 
    { 
     width: 200px; 
     display:block; 
     margin: 200px auto 0 auto; 
     list-style-type: none; 
     padding: 0; 
    } 

.dropdown li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
} 

.dropdown li a:hover 
{ 
    background-color: #333333; 
}

Если вы хотите, чтобы применить "выпадающий список". стили для ребенка ul, например:

<ul class="dropdown"> 
    <li><a href="#">Button 1</a> 
      <ul> 
       <li><a href="#">subButton 1</li> 
       <li><a href="#">subButton 2</li> 
       <li><a href="#">subButton 3</li> 
      </ul> 
    </li> 
    <li><a href="#">Button 1</a></li> 
    <li><a href="#">Button 1</a></li> 
</ul>

Вы просто добавляете свои стили для включения ребенка ul и child u i li, следующим образом; где .dropdown фактически представляет вашу первую улицу. Так что .dropdown (ul) -> li (список в списке «выпадающий» неупорядоченный список) -> ul (ul внутри dropdown li) -> li (li внутри dropdown ul li ul)

Извините, если это звучит но, другими словами, если бы вы не назначили класс своей родительской ul вообще, было бы ul li ul li получить доступ к элементу списка внутри дочернего списка.

.dropdown, dropdown li ul 
{ 
    width: 200px; 
    display:block; 
    margin: 200px auto 0 auto; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li, .dropdown li ul li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited, .dropdown li ul li a:link, .dropdown li ul li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
}

источник

2012-01-25 21:29:49 jhilgert00

Это круто! Для динамических многоуровневых меню (т. Е. Множество подменю, количество которых определяется динамически), что мне нужно сделать для динамического предоставления всем подменю тех же атрибутов и действий, которые предлагает вышеприведенный код? – user1100412

@ user1100412 Вы можете сделать это легко, добавив запятую, а затем имя класса подменю в часть идентификатора (имя) css, например: .dropdown li: alink, .dropdownSubmenu li a: link {properties go здесь ...} нет предела тому, сколько вы можете перечислить, и все идентификаторы, разделенные запятыми, будут иметь одинаковые свойства таким образом. Скажем, например, существует только одно свойство, которое отличается от другого, вы можете объявить их отдельно в другом месте без конфликтов. Это также уменьшает ваш код. :) Я ответил на ваш первый вопрос? – jhilgert00

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

Проблемы с раскрывающимся меню UL

ответ

Смежные вопросы