Как использовать (верхнее) поле с раскрывающимся меню CSS3? - PullRequest
Новая
       7

Как использовать (верхнее) поле с раскрывающимся меню CSS3?

0 голосов
/ 30 ноября 2011

Я пытаюсь создать раскрывающееся меню полностью в CSS3. По большей части я выполнил то, что хотел, но почему-то не могу добавить margin-top: 10px; в раскрывающееся меню, так как не хочу, чтобы оно касалось главной ссылки. Кажется, он деактивирует зависание при достижении поля?

Я опубликовал рабочий пример без полей на jsFiddle: http://jsfiddle.net/J5QSv/

Это с margin-top: 10px;, и не работает: http://jsfiddle.net/RastaLulz/J5QSv/2/

Как видите, это прекрасно работает. Однако, когда вы раскомментируете margin-top: 10px;, он больше не работает.

Знаете ли вы, как это исправить? или работа вокруг?

HTML 

<span class="LinksMenu">
    <ul>
        <li>
            <a href="#">Account</a>
            <ul>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
    </ul>
</span>

CSS 

body {
    padding: 10px;
    background: #F3F3F3;
}

a:link,a:visited { color:#000; text-decoration:none }
a:hover,a:active { color:#000; text-decoration:underline }

.LinksMenu {
    margin:0;
    padding:0;
    clear: both;
}

.LinksMenu ul {
    margin:0;
    padding:0;
}

.LinksMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;
}

.LinksMenu ul ul li a {
    margin: 0;
    padding: 10px;
    width: 100px;
    display: block;
    text-shadow: 0;
    color: #000;
}

.LinksMenu ul ul {
    /* margin-top: 3px; */
    border: 1px solid #CCC;
    border-radius: 3px;
    background: #FFF;
    position: absolute;
    visibility: hidden;
}

.LinksMenu ul li:hover ul {
    visibility: visible;
}

1 Ответ

3 голосов
/ 30 ноября 2011

Одним из исправлений является добавление высоты элементу наведения при наведении, чтобы элемент находился под тем, который появляется. Вам нужно будет добавить класс на верхний уровень <li> s. 

.LinksMenu ul li.myClass:hover{
    height: 80px;
}

Проверьте скрипку .

...