Горизонтальные линии в динамической навигации

Question

У меня есть потребность в разработке вертикального меню навигации с использованием библиотеки jQuery, которая даст ему возможности дерева. Трюк, с которым я столкнулся, состоит в том, что меню должно быть многострочным (т.е. word-wrap: normal на каждом якоре) и иметь горизонтальные линии, проходящие через него. Каждый метод, который я попробовал, делает либо строки странными, либо открытые/закрытые значки для отображения дерева. Мне также нужна совместимость с IE6 +.

Я использую библиотеку jsrree jQuery для древовидного изображения и применяю свой собственный CSS к миксу. Я пробовал 4 разных способа заставить его работать, но here is my current attempt. Просмотр его в Firefox или IE8 дает наилучшие результаты, но у других браузеров разные проблемы.

Answer 1

Вы пробовали

#leftnav li { 
    border-bottom: 1px solid #FFF; 
} 

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