Выпадающее горизонтальное меню только на CSS

[RelaX Inc.]

С анимацией лучше, но это уже не по теме, так как это js надо, я прав?) А вообще можно и без нее

[serken]

Думаю да. Подождите немного

[serken]

Сообщение от RelaX Inc.

С анимацией лучше, но это уже не по теме, так как это js надо, я прав?) А вообще можно и без нее

Не совсем. Анимацию можно сделать и средствами css3

[RelaX Inc.]

Ну вообщем по-любому лучше с анимацией, но это уже не по теме

[serken]

HTML

<div id="menu">
    <ul class="nav">
        <li><a href="/">Новости</a> 
            <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
        </li>
        <li><a href="/forum/">Форум</a>
            <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
        </li>                 
        <li><a href="/load/">Загрузки</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/ships/">Корабли</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/video/">Видео</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/images/">Изображения</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/stories/">Истории</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="./index.php?do=feedback">Связь с администрацией</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
    </ul>
</div>

CSS

#menu .nav {
    position: relative;
    font-family: Times New Roman;
    font-size: 16px;
    border-bottom:2px solid #FFFFFF;
    border-top:2px solid #FFFFFF;
    height:30px;
    margin-top: 25px;
    background: url('bg.png');
        -webkit-box-shadow: 0px 0px 50px #000000; /* Safari, Chrome */
        -moz-box-shadow: 0px 0px 50px #000000; /* Firefox */
        box-shadow: 0px 0px 50px #000000}
        
#menu .anchor {position: absolute; top: 22px; display: none; background: white; padding: 10px;}

#menu .anchor li{width: 150px; position: relative;} /*Пункт вложенного меню*/

#menu .nav li:hover .anchor, .anchor:hover{display: run-in;}   /*Наведение на пункт*/

#menu .nav li {float: left; list-style: none; position: relative;} /*Все пункты главного списка*/
    
#menu .nav li .anchor a{margin: 5px; height: 20px;}   /*Вложенные ссылки*/
 
#menu .nav li a {
    text-decoration: none;
    margin-left:20px;
    display: block;
    height: 26px;  
    padding-top: 4px;
    }
 
#menu ul li a:link { 
    color:#bad7fc;
    }
#menu ul li a:visited { 
    color:#bad7fc;
    }
#menu ul li a:hover {color:#84bbff;
    text-decoration: underline;
    }

[serken]

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

[RelaX Inc.]

serken, сейчас этот код опробую, и отпишусь

[RelaX Inc.]

serken, вроде все работает, но почему то все элементы(главные, типа Новости, Изображения и т.д.) не по середине?

[serken]

а ваше меню вы хотите сделать резиновым? на всю страницу ?

[RelaX Inc.]

Да
10 символов