Стилизация раскрывающегося списка

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


Для реализации сего списка я использовал HTML-код, найденный на этом же форуме:

Код:

<form><select onchange="location.href=(form.select.options[form.select.selectedIndex].value)" class="forminput" name="select">
<option>Список лекций:</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 1</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 2</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 3</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 5</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 6</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 7</option>
</select>
</form>

Просто вставлял его в описание нужного форума в нужной категории, и всё. Единственное, что меня не устраивает - синие строчки и рамка. Оформление выполнено в чёрно-красных тонах. Можно ли и здесь подкорректировать? Чтобы при наведении строчки "Лекция 1,2 и.т.п" загорались другим цветом? И другая обводка была. Не синяя.

Нашёл на просторах форума вот такой вот код:

Код:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#requestytopic .listin").load("/f1-forum div.topictitle");

jQuery('#requestytopic .top').click(function(){
      jQuery(this).parent().children('div.listin').slideToggle("fast");
      return false;
    });

jQuery(document).click(function(event) {
    if (jQuery(event.target).closest(".listin").length) return;
    jQuery(".listin").hide();
    event.stopPropagation();
  });

});
</script>

<div id="requestytopic">
<div class="top">Принятые заявки: </div>
<div class="listin"></div>
</div>

В котором, похоже, создаётся список через JS. И загружаются все темы из конкретного форума. А можно сделать, чтобы вместо загрузки абсолютно всех тем, просто забить туда список необходимых ссылок? Пригодятся просто оба варианта, но наиболее полезен с выборочным добавлением.

Здравствуй.   

Глянь эту тему, может она окажется более полезной.

https://help.forum2x2.ru/t22651-topic

  

Сказочник Зазеркалья,   
Благодарю за подсказку) Вот что получилось у меня в итоге:


Это по сути всё ставится в описание форума опять же, чуть корректируется через CSS. Всего один остался вопрос. Можно как-либо сделать, чтобы при наведении на картинку, она заменялась другой? Т.е. так просто одна картинка, а при наведении - с другой цветовой гаммой. Типо "активизировалась". Вторую картинку нарисовать то не проблема, а вот как её во весь этот адский механизм приладить и привязать к наведению - я ещё не понял.

Посмотри эту тему:

https://help.forum2x2.ru/t26406-topic

  

Сказочник Зазеркалья,        


Не зря говорят, мол лучшее - враг хорошего. Я позарился на горизонтальный скролл. Дабы оставить окошко прокрутки маленьким. Кому надо - тот прочитает то, что дальше - посчитал я. Но вот проблема в том, что там работает очень, очень и очень странный перенос по словам. Установлены параметры так, что при пересечении границы - оставшийся текст прячется под горизонтальный скролл. В теории всё должно быть правильно, а вот что можно наблюдать на практике:


И вся забава то в том, что всё работает. Но программа помещает под скролл лишь цельные слова:


Частично исправляет проблему подчёркнутый проблел, так же наверно можно ставить ссылки с изображениями, их-то не перенесёт. Но мало ли, может быть есть менее извращенский способ заставить всё корректно работать?

Ещё раз большое спасибо)
Проблема решилась сама собой. Просто, вместо пробела следует вводить код:

Код:

&nbsp

Результат:


Тема к закрытию подготовлена  

Зверобой пишет:Сказочник Зазеркалья,        

Рад что смог тебе помочь.   

Раз уж тема упорно не хочет закрываться... Допишу, что сделал себе все скроллы, даже смог стилизовать. Небольшая проблемка из прошлого возникла.

Про две картинки, где одна сменяет другую, я понял. А что нужно там дописать, чтобы одна другую сменила, но пока нажата кнопка, чтобы обратной трансформации не происходило?

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

Вот что по двум картинкам забито в CSS:

Код:

.image.first,.image.second {
border:2px solid transparent;
margin:0;
padding:0;
}

.image.first {
opacity:1px;
display:block;
position:absolute;
z-index:100;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

.image.first:hover {
opacity:0.00;
}

div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}


Эта часть достаточно рабочая. Я старался добавить что-то вроде этого:

Код:

.image.second:active {
transition-duration: 99s;
} 

Менял active и hover, просто убирал эти приставки - ничего. Видимо допускаю грубую ошибку.