CSS-граница и динамический псевдокласс: hover - PullRequest
Новая
       34

CSS-граница и динамический псевдокласс: hover

2 голосов
/ 23 мая 2010

Я создал постоянное выпадающее меню с двумя уровнями, используя только CSS.Это довольно стандартно.

Это вложенный набор UL и UL: состояние наведения - это то, что показывает и скрывает уровни подменю.

Примерно так: 

| *Pets* | Colors | Cars |
| Cats | Dogs | Birds| Goats | Sheep | 


| Pets | *Colors* | Cars |
| Red | Orange | Green | Blue| Yellow |

Затем я добавил границу размером 1 пиксель внизу элемента UL первого уровня.Например: 

| *Pets* | Colors | Cars |
--------------------------------------
| Cats | Dogs | Birds| Goats | Sheep |

Когда я наведите курсор мыши на элемент первого уровня (Домашние животные), а затем переместите мышь вниз на второй уровень (Кошки), весь второй уровень исчезнет.Наконец я понял, что граница UL в 1 пиксель не включена в область наведения для UL.

Могу ли я добавить границу к нижней части уровня выпадающего меню, не мешая работе меню?1016 *

Спасибо!

Ответы [ 2 ]

3 голосов
/ 24 мая 2010

Поскольку вы фактически добавляете состояние :hover к <li> s в <ul>, граница родительского элемента <ul> не включена в область :hover. Это решило бы вашу проблему, добавив границу к каждому <li> вместо родительского <ul>. Обязательно добавьте левое и правое поля от 0 до <li> s, и даже если вы сделаете это, вам все равно может понадобиться добавить отрицательное левое поле или левую позицию, чтобы удалить пробелы в границе, а также добавить стили переопределения для подменю <li> s, если они также заканчиваются нижней границей. <ч /> РЕДАКТИРОВАТЬ: Хорошо, у меня есть решение, которое, надеюсь, будет работать для вас, используя следующий HTML: 

<ul>
    <li>Main1
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main2
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main3
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main4
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
</ul>

и этот CSS: 

ul { background:#ccc; border-bottom:5px solid #0c0; height:25px; }
ul li { cursor:pointer; display:inline-block; position:relative; height:30px; 
        zoom:1; _display:inline; }
ul li:hover ul { display:block; }
ul li ul { border:0 none; display:none; position:absolute; top:30px; }
ul li ul li { display:inline; padding:5px; }

Ключевые части здесь:

  • Установить высоту ul, чтобы она была меньше высоты основного ul li на величину, равную border-width
  • Установить display:inline-block на li, чтобы атрибут высоты вступил в силу
    • (Примечание: zoom:1; _display:inline; для IE6)
  • Установите position:relative на основной ul li и position:absolute на подчиненной 'ul li ul' со значением 'top' основной высоты 'ul li'

Проверено и работает: http://jsfiddle.net/TKrSM/1/ (возможно, придется настроить высоту и верхние значения для отступов в вашей версии)

2 голосов
/ 23 мая 2010

Вы можете использовать фон и дать ему черную линию 1px внизу, или вы можете добавить элемент и расположить его абсолютно с высотой 1px и черным фоном. Я бы выбрал фоновый вариант, потому что он намного проще.

...