Стилизация выпадающих списков основывается на замене стандартного элемента html <select>  на маркированный список<ul>, оформленный с помощью CSS необходимым нам образом.

JavaScript перехватывает все события onClick на странице и проверяет не "нажал" ли пользователь на ту или иную область выпадающего списка. Если произошло необходимое событие, и необходимо раскрыть, свернуть или выбрать необходимый элемент, скрипт применяет к элементам маркированного списка соответствующие стили и изменяет выбранное значение исходного выпадающего списка <select> (который был скрыт при загрузке страницы).

Ниже привожу результат стилизации (взят с реального проекта):

Чтобы не загромождать страницу кодом размещаю ссылку на архив с рабочим примером.

Затем пишем в таблице стилей следующий код, отвечающий за оформление чекбоксов:

.f_checkbox {
background-repeat:no-repeat;
background-position:0px center;
height:16px;display:block;
cursor:pointer;
cursor:hand;
width:20px;
height:20px;
}

.checked,.selected{
color:#ddd;
}

.f_checkbox{
padding:0px;
background-color:#ccc;
}

.unchecked{
background-image:url('img/checkbox_off.gif');
}

.checked{
background-image:url('img/checkbox_on.gif');
}

В коде страницы делаем следующую запись:

<!-- один из оформляемых чекбоксов -->
<label class="f_checkbox"><input type="checkbox" /></label>;
<!-- подключаем скачанные java-скрипты -->
<script type='text/javascript' src='mootools.js'></script>
<script type='text/javascript' src='demo-moo.js'></script>;

checkbox_on.gif и checkbox_off.gif изображения выбранного и не выбранного checkbox`а.

Теперь остается только экспериментировать =)

Для начала создадим тело меню средствами HTML:

<div id="v_menu">
<ul>
	<li><a href="#">Menu item 1</a></li>
	<li><a href="#">Menu item 2/a></li>
	<li><a href="#">Menu item 3/a></li>
	<li><a href="#">Menu item 4/a></li>
</ul>
</div>

Следующим шагом определим размер всего блока меню, границы, внутренние и внешние отступы, тип шрифта, цвет фона и цвет текста.

#v_menu  {
    width: 200px;
    border: 1px solid #000;
    padding: 0 0 0 0;
    margin: 10px 0 0 0;
    font:14px Arial;
    background-color: #90bade;
    color: #333;
}

Теперь определим стили самых списков меню, которые являются элементами списка.

Для всего списка зададим нулевые отступы, уберем границу и маркеры списка.

#v_menu ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}

Для каждого из пунктов меню (элементов списка) зададим размер, тип и цвет нижней границы и нулевой отступ.

#v_menu li {
    border-bottom: 1px solid #90bade;
    margin: 0 0 0 0; }

Следующим шагом оформим сами ссылки. Зададим блочный стиль отображения ссылок (для того чтобы блок самой ссылки растянулся по ширине и высоте пункта списка), внутренние отступы, нулевую границу, цвета фона и самих ссылок, уберем подчеркивание ссылок.

#v_menu li a {
    display: block;
    padding: 5px 5px 5px 5px;
    border: 0px;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

Следующий стиль существует исключительно потому, что свойство display: block не срабатывает для браузера IE под Windows.

html>body #v_menu li a {
    width: auto;
}

Следующий стиль описывает поведение пунктов меню при наведении на них курсора мышки. В данном случае изменяется цвет фона.

#v_menu li a:hover {
    border:0px;
    background-color: #2586d7;
    color: #fff;
}

#div_container {
    padding: 5px;
    border: 1px solid #000;
    margin-bottom: 25px;
}

Теперь создадим стиль для списка.

#div_container ul {
    margin-left: 0;
    padding-left: 0;
        /* задаем отображение списка в строку */
    display: inline;
}

Создаем стиль отображения каждого элемента списка:

#div_container ul li {
    margin-left: 0;
    padding: 2px 10px 0 0 ;
        /* задаем разделитель между пунктами меню */
    border-left: 1px solid #000;
        /* запрещаем отображение маркеров списка */
    list-style: none;
    display: inline;
}

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

#div_container ul li.first {
    margin-left: 0;
    border-left: none;
    list-style: none;
    display: inline;
}

Теперь приведем пример кода меню:

<div id="div_container">
    <ul>
    <li><a htef="#">Link 1</a></li>
    <li><a htef="#">Link 2</a></li>
    <li><a htef="#">Link 3</a></li>
    <li><a htef="#">Link 4</a></li>
    </ul>

</div>

В заключение следует создать стиль для ссылок. Например:

#div_container ul li a, a:hover, a:link {
    text-decoration: none;
    font: 12px Tahoma;
}