Выцветающий выпадающий CSS из изображения

Question

Выцветающий выпадающий CSS из изображения

0

Я следил за несколькими учебными пособиями и искажал его, чтобы создать выпадающее меню из логотипа веб-сайта.

Это все прекрасно работает, как я стремился к этому. Чтобы добавить эффект, я бы хотел, чтобы пункты меню спокойно исчезали, а не просто там. Я пытался следовать учебным пособиям, но я думаю, что я ударил список CSS настолько, что его трудно было внедрить.

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

Здесь рассмотрим HTML.

<nav>
<ul>
    <li><a href="#"><div id="logo"><img src="images/logo.png" width="318" height="85"      alt="Logo of Website"/></div></a>

        <ul>
            <li class="sub"> <a href="#">Much</a>

            </li>
            <li class="sub"> <a href="#">Navigation</a>

            </li>
            <li class="sub"> <a href="#">Very</a>

            </li>
            <li class="sub"> <a href="#">Links</a>

            </li>
            <li class="sub"> <a href="#">Wow</a>

            </li>
        </ul>
    </li>
</ul>
</nav>

И мой беспорядок в стилистике

li {
    list-style:none !important;
}

.sub {
    padding:5px;
    width:300px;
    margin-bottom:1px;
    border:rgba(0, 0, 0, 0.2);
    height:20px;
    vertical-align:central;
}

nav ul {
    padding:0;
    margin:0;
}

nav ul li {
    list-style: none;
    float:left;
    background-color:rgba(0, 0, 0, 0.5);
}

nav ul li a {
    text-decoration:none;
    color:white;
    font-family:'Merriweather', Baskerville, "Century Schoolbook L", "Times New Roman", serif;
    font-weight:300;
    color:white;
    font-size:0.9em;
}

li a:hover {
    font-style:italic;
    word-spacing:3px;
    height:20px;
}

nav ul li ul {
    display:none;
}

nav ul li:hover ul {
    z-index:5;
    display:list-item !important;
    position:absolute;
    margin-top:90px;
}

nav ul li:hover ul li {
    float:none;
}

И ссылка JSFiddle, которая показывает вам коробку, которая является логотипом, и когда вы наводите на нее курсор, под ней появляется меню... Я хочу, чтобы список меню исчезал, а не просто выпрыгивал за логотип. JSFiddle

LukeScotney93 06 май 2014, в 14:41

Источник

0

Вы можете использовать JavaScript или JQuery для достижения этой цели.
Deepu Sasidharan 06 май 2014, в 12:18

Теги:

html

css3

drop-down-menu

1 ответ

Ещё вопросы

Вы можете использовать JavaScript или JQuery для достижения этой цели.

b4rbika · Accepted Answer · 2014-05-06T09-56-00.000Z

Попробуйте переходы CSS3, если вы не хотите использовать jQuery. Я думаю, что ваша разметка может потребоваться перезаписи, но попробуйте, например:

transition:All 1s linear;
-webkit-transition:All 1s linear;
-moz-transition:All 1s linear;
-o-transition:All 1s linear;

Вы были правы. Я испортил свой CSS, но после того, как правильно переписал это слово метода. Спасибо :)