Выпадающее меню на CSS

Jettecs

При на ведении на меню, оно выпадает как и предпологалось со всеми переходами, но при наведении на один пункт подменю исчезают все остальные
<nav>
        <ul class="menu">
        <li><a href=#>HOME</a>
        <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
 
    <li><a href=#>Services</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
    <li><a href=#>Solutions</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
    <li><a href=#>Partners</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
    <li><a href=#>Contacts</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
        </ul>
</nav>
@font-face{
font-family: Swis721BTRoman;
src: url(../fonts/Swis721BTRoman.woff);
}
 
 
body{
    font-family: Arial, sans-serif;
    font-size: 14pt;
    margin: 0 auto;
    padding: 0 auto;
    width: 1000px;
}
* {
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: easy-in-out;
    transition: opacity 2s easy-in;
    transition-delay: .1s; 
}
 
ul{
    display: block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
 
ul.menu > li{
    float: left;
    position: relative;
}
 
ul.menu > li > a{
    display: block;
    padding: 0;
    width: 131px;
    height: 38px;
    line-height: 38px;
    margin: 0 1px 0 0;
    color: white;
    border-radius: 5px 5px 0 0;
    text-align: center;
    font-family: Swis721BTRoman;
    font-size: 14pt;
    text-decoration: none;
    background: linear-gradient(to top, #111111, #262626);
    position: relative;
    
}
ul.submenu > li > a{
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    padding-left: 10px;
    color: white;
    text-align: left;
    line-height: 37px;
    font-family: Arial;
    font-family: 12pt;
    text-decoration: none;
    background: linear-gradient(to left, #f6a70c, #e77e01);
    height: 37px;
    visibility: hidden;
    opacity: 0.2;
}
 
 
ul.submenu > li > a:hover{
    display: block;
    text-decoration: none;
    background: #4e4e4e;
    
    
    }
    ul.submenu > li:hover{
        display: block;
        visibility: visible;
        opacity: 1;
    }
 
ul.menu > li > a:hover + ul.submenu > li > a {
    display: block; 
    visibility: visible;
    opacity: 1;
}
 
ul.menu > li > a:hover{
    background: linear-gradient(to left, #f6a70c, #e77e01);
    font-family: Swis721BTRoman;
    font-style: italic;
    
 
 
}
6 ответов

Jettecs

Так пойдет ?
  <nav>
        <ul class="menu">
        <li><a href=#>HOME</a>
        <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
    <li><a href=#>Services</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
    <li><a href=#>Solutions</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
    <li><a href=#>Partners</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
    <li><a href=#>Contacts</a>
    <ul class="submenu">
            <li><a href=#>Home</a></li>
            <li><a href=#>Services</a></li>
            <li><a href=#>Solutions</a></li>
            <li><a href=#>Partners</a></li>
            <li><a href=#>Contacts</a></li>
        </ul>
    </li>
        </ul>
</nav>
@font-face{
font-family: Swis721BTRoman;
src: url(../fonts/Swis721BTRoman.woff);
}
 
 
body{
    font-family: Arial, sans-serif;
    font-size: 14pt;
    margin: 0 auto;
    padding: 0 auto;
    width: 1000px;
}
* {
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: easy-in-out;
    transition: opacity 2s easy-in;
    transition-delay: .1s; 
}
 
ul{
    display: block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
 
ul.menu > li{
    float: left;
    position: relative;
}
 
ul.menu > li > a{
    display: block;
    padding: 0;
    width: 131px;
    height: 38px;
    line-height: 38px;
    margin: 0 1px 0 0;
    color: white;
    border-radius: 5px 5px 0 0;
    text-align: center;
    font-family: Swis721BTRoman;
    font-size: 14pt;
    text-decoration: none;
    background: linear-gradient(to top, #111111, #262626);
    position: relative;
    
}
ul.submenu > li > a{
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    padding-left: 10px;
    color: white;
    text-align: left;
    line-height: 37px;
    font-family: Arial;
    font-family: 12pt;
    text-decoration: none;
    background: linear-gradient(to left, #f6a70c, #e77e01);
    height: 37px;
}
 
ul.submenu{
display:none;
}
 
ul.menu > li:hover > ul.submenu{
display:block;
}
 
 
ul.submenu > li > a:hover{
    display: block;
       background: #4e4e4e;
}
 
ul.menu > li > a:hover{
    background: linear-gradient(to left, #f6a70c, #e77e01);
    font-family: Swis721BTRoman;
    font-style: italic;
}


Jettecs

Спасибо но это немного не то, здесь нужно использовать visibility and opacity не каких display:none display:block


Jettecs

Используйте position absolute left: -9999px с opacity.
position: absolute;
left: -9999px;
opacity: 0;
transition: opacity .5s ease-out;
 
:hover {
left: 0;
opacity: 1;
}


Jettecs

Используйте position absolute left: -9999px с opacity.
неа не то


Jettecs

Вот так оно должно выглядеть, но как только мышка уходит с HOME все меню сразу тухнет


Jettecs

У меня все работает https://jsfiddle.net/0coaL8es/2/
<ul class="menu">
    <li>
        <a href="#">HOME</a>
        <ul class="submenu">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
        </ul>
    </li>
</ul>
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
  background: lightblue;
}
 
.submenu {
  position: absolute;
  left: -9999px;
  opacity: 0;
  transition: opacity .3s ease;
}
.menu li:hover .submenu {
  left: 0;
  opacity: 1;
}