Время отображения выпадающего меню CSS

вопрос

Нужна помощь - прицепил на сайт меню на чистом CSS.
Все нравится, вот только быстро сворачивается.
Сам сайт - Тут

Может кто знает как задать время отображения выпадающего списка (меню)? Есть ли такое в CSS (без использования JS)?

Ниже привожу сам код:

Показать / Скрыть текст


@charset "cp1251";
/* CSS Document */

@font-face {
    font-family: 'Ubuntu Condensed';
    src: url('../_fonts/UbuntuCondensed-Regular.ttf');
    font-weight: 400;
}

/***Global styles***/

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align:baseline;
    font: inherit;
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
    display: block;
}

* { margin: 0; 
    padding: 0; }

#container{
    padding:20px;}


/* Main Menu */

#menu {
    clear:both;
    width: 1000px;
    height:37px;
    border:1px solid #E0E0E0;
    margin:10px auto 0 11px;
    background: url(../images/bg_amenu.png) left center repeat-x;
    box-shadow: 0px 3px 8px #cecece;
    border-radius:5px;
    margin:30px auto;    
}

.menu{
    padding-top:2px;}

.menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 2px 10px;
    border:none;
    margin-left:3px;
}

.menu li:hover {
    display:block;
    padding: 2px 8px 6px;
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 20px 0px 0px 0px;
    border:2px solid #B91A0C;
}

.menu li a {
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size:17px; 
    outline:0;
    text-decoration:none;
    color:#000000;
}

.menu li:hover a {
    color:#000;
    text-shadow: 0px 1px 0px #ccc;
    
}

.menu li a.active {
    background:#0990ff;
    color: #fff;
    padding:8px 15px 7px 15px;
    text-decoration:none;
}

.menu li .drop {
    background:none;
}

.menu li:hover .drop {
    background:none;
}

.dropdown-1column, 
.dropdown-2columns, 
.dropdown-3columns, 
.dropdown-4columns,
.dropdown-5columns {
    margin:3px auto;
    float:left;
    position:absolute;
    left:-999em;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:2px solid #B91A0C;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    border-top:none;
    background:#f4f4f4;
    background: -moz-linear-gradient(top, #f4f4f4, #d8d8d8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#d8d8d8));
}

.dropdown-1column {width: 145px;}
.dropdown-2columns {width: 380px;}
.dropdown-3columns {width: 420px;}
.dropdown-4columns {width: 560px;}
.dropdown-5columns {width: 700px;}

.menu li:hover .dropdown-1column, 
.menu li:hover .dropdown-2columns, 
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {
    left:-2px;
    top:30px;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col-1 {width:130px;}
.col-2 {width:270px;}
.col-3 {width:410px;}
.col-4 {width:550px;}
.col-5 {width:690px;}
.col-demo{width:145px;} 

.col-5 img{
    float:left;
    margin-right:20px;}
    
.col-5 p{
    font-size:20px !important;
    padding-top:30px;
    color: #F30;
    text-shadow:1px 1px 2px #fff !important;
    font-family: 'Ubuntu Condensed', sans-serif;}    


.menu p, .menu h2, .menu h3, .menu ul li {
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
}
.menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
    box-shadow: 0 2px 0 #CCCCCC;
}

.menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
    box-shadow: 0 2px 0 #CCCCCC;
}

.menu p {
    line-height:18px;
    margin:0 0 22px 0;
}

.menu li:hover div a {
    padding-left:3px;
    font-size:15px;
    color:#003e62;
    text-shadow:none;
}

.menu li:hover div a:hover {
    color:#029feb;
    text-shadow:none;
}


.strong {
    font-weight:bold;
}

.italic {
    font-style:italic;
}

.menu li .blackbox {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
}

.menu li .blue {
    background-color: #444;
    box-shadow: 0px 4px 12px #000 inset;
    padding: 7px 10px;
    text-shadow: 1px 1px 1px #000000;
}

.menu .blue li a{
    color: #FFFFFF !important;
    text-shadow:0 1px 0 #000 !important;}

.menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}

.menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
}

.menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}

.menu li .grisbox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;
    -moz-border-radius:5px 5px 2px 2px;
    -webkit-border-radius:5px 5px 2px 2px;
    -khtml-border-radius: 5px 5px 2px 2px;
    border-radius: 5px 5px 2px 2px;
    -webkit-box-shadow:inset 0 0 3px #ccc;
    -moz-box-shadow:inset 0 0 3px #ccc;
    box-shadow:inset 0 0 3px #ccc;
}

.menu li .grisbox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
}

.imgclass{
    float:left;
    margin-top:3px;
    margin-right:10px;
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;}
    
.text{
    width:230px;
    display:block;}
    
.textblock{
    width:410px;
    clear:both;}

Ответил: GigA

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Вроде оно.

<script> document.addEventListener('DOMContentLoaded', function() { const links = document.querySelectorAll('a#xfield_value'); links.forEach(link => { let href = link.getAttribute('href'); if (href) { href = href.replace(/ /g, '+'); link.setAttribute('href', href); } }); }); </script>

3 комментария

Гости

235

Exile - - #22382

Свойство transition в CSS3
Генератор

Юзер

Yurets - - #22424

спасибо, но это не то.
поигрался с этим атрибутом - он отвечает за скорость прорисовки элементов к которым применяется.

А мне нужно чтобы подчиненные пункты выпадающего меню немного задерживались, а не сразу же "убегали" как только отводишь курсор с Родительского пункта меню

Yurets - - #22428

в общем может кому пригодится.
Использовал

-webkit-transition: 1s ease-out;
transition: 1s ease-out;

для прорисовки обводки родительского пункта меню (когда мышка над этим пунктом)

В принципе этого времени достаточно чтобы перейти на выпадающие пункты.

p.s. Если все же кто-то знает как "задержать" на немного выпадающий список (меню) буду благодарен! т.к. это все же обходные пути, а не решение проблемы )

Технический сбой

Время отображения выпадающего меню CSS

Ответил: GigA

3 комментария

Похожие вопросы

Ярлык оффлайн не на своём месте

Из обычного меню выпадающее

Выдвигающиеся меню

Помогите сместить меню

Настройка модального окна

подскажыте пожалуйста наченаюшему

как убрать прозрачность подсказки, пожалуйста помогите? код

Выпадающее меню в шаблоне, как срастить?

Как правильно создать css table?