Выпадающее меню и анимации

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

HTML файла:

<!DOCTYPE html> 
<html> 
    <head> 

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8" /> 

     <link rel="stylesheet" type="text/css" href="style.css"> 
     <title>My Page Title</title> 
    </head> 

    <body> 
     <div> 

       <ul class="menu" id="nav"> 
        <li><a href=""><span> 
        Tab5</span></a> 
         <ul class="menu-hover"> 
          <li><a href="">Tab5_1</a></li> 
          <li><a href="">Tab5_2</a></li> 
          <li><a href="">Tab5_3</a></li> 
         </ul> 
        </li> 

        <li><a href=""><span> 
        Tab4 
        </span></a> 
         <ul class="menu-hover"> 
          <li><a href="">Tab4_1</a></li> 
          <li><a href="">Tab4_2</a></li> 
         </ul> 
        </li> 

        <li><a href="candidates.html"><span>Tab3</span></a> 
         <ul class="menu-hover"> 
          <li><a href="">Tab3_1</a></li> 
          <li><a href="">Tab3_2</a></li> 
          <li><a href="">Tab3_3</a></li> 
          <li><a href="">Tab3_4</a></li> 
         </ul> 
        </li> 

        <li><a href=""><span> 
        Tab2 
        </span></a> 
         <ul class="menu-hover"> 
          <li><a href="">Tab2_1</a></li> 
          <li><a href=""> Tab2_2</a></li> 
          <li><a href="">Tab2_3 </a></li> 
         </ul> 
        </li> 


        <li><a href="vision.html"><span>Tab1 </span></a> 
         <ul class="menu-hover"> 
          <li><a href="">Tab1_1 </a></li> 
          <li><a href="">Tab1_2</a></li> 
          <li><a href="">Tab1_3</a></li> 
         </ul> 
        </li> 
       </ul> 
     </div>    

     <div><footer id="footer"></footer></div> 
    </body> 
</html>

CSS3 Файл:

@charset "utf-8"; 
/* CSS Document */ 

* { 
    margin:0px; 
    padding:0px; 
} 
body { 
    background:#f4f4f4; 
} 

#nav { 
    width:933px; 
    margin:0 auto; 
    height:250px; 
    padding-top:20px; 
} 

ul li { 
    background:#2a2a2a; 
    list-style: none; 
    height: 44px; 
    float:left; 
    padding:10px 5px; 
} 
ul li a { 
    width: 175px; 
    height: 40px; 
    line-height: 53px; 
    border-bottom: 4px solid #636393; 
    padding:0px; 
    color: #fff; 
    font-size:18px; 
    font-weight:lighter; 
    text-align:center; 
    text-decoration: none; 
    display: block; 
    -webkit-transition: .2s all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
} 

ul li a:visited { 
color:#fff; 
} 


ul li:nth-child(1) a , #myID li:nth-child(1) a, #myID li:nth-child(2) a , #myID li:nth-child(3) a 
{ 
border-color: #636393; 
} 

ul li:nth-child(2) a { 
border-color: #B5222D; 
} 
ul li:nth-child(3) a { 
border-color: #D4953C; 
} 
ul li:nth-child(4) a { 
border-color: #609491; 
} 
ul li:nth-child(5) a { 
border-color: #87A248; 
} 

ul li:nth-child(1) a:hover { 
border-bottom: 35px solid #636393; 
height: 9px; 
color: #fff; 
} 

ul li:nth-child(2) a:hover { 
border-bottom: 35px solid #B5222D; 
height: 9px; 
color: #fff; 
} 
ul li:nth-child(3) a:hover { 
border-bottom: 35px solid #D4953C; 
height: 9px; 
color: #fff; 
} 

ul li:nth-child(4) a:hover { 
border-bottom: 35px solid #609491; 
height: 9px; 
color: #fff; 
} 

ul li:nth-child(5) a:hover { 
border-bottom: 35px solid #87A248; 
height: 9px; 
color: #fff; 
} 

ul.menu-hover{ 
visibility: hidden; 
position: absolute; 
top:100%; 
opacity: 0; 
height: 0; 
width: 150px; 
border-bottom: 1px solid #636393; 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
transition: all 0.3s ease-in-out; 
} 

.menu li:hover .menu-hover{ 
visibility: visible; 
height: 40px; 
opacity: 1; 
} 

ul.menu-hover li{ 
height: 100%; 
border-bottom: 4px solid #000; 
background-color: #2a2a2a; 
border-left: none; 
border-right: none; 

} 

ul.menu-hover li:hover{ 
background-image: -webkit-linear-gradient(#2a2a2a, #434343); 
background-image: -moz-linear-gradient(#2a2a2a, #434343); 
background-image: -o-linear-gradient(#2a2a2a, #434343); 
background-image: linear-gradient(#2a2a2a, #434343); 
box-shadow: none; 
}

источник

2013-06-02 Wael Showair

я наконец поправил мой Файл CSS3 должен быть следующим:

@charset "utf-8"; 
/* CSS Document */ 

* { 
    margin:0px; 
    padding:0px; 
} 
body { 
    background:#f4f4f4; 
} 

#nav { 
    width:933px; 
    margin:0 auto; 
    height:250px; 
    padding-top:20px; 
} 

#nav li { 
    background:#2a2a2a; 
    list-style: none; 
    height: 44px; 
    float:left; 
    padding:10px 5px; 
} 
#nav li a { 
    width: 175px; 
    height: 40px; 
    line-height: 53px; 
    border-bottom: 4px solid #636393; 
    padding:0px; 
    color: #fff; 
    font-size:18px; 
    font-weight:lighter; 
    text-align:center; 
    text-decoration: none; 
    display: block; 
    -webkit-transition: .2s all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
} 

#nav li a:visited { 
color:#fff; 
} 


#nav li:nth-child(1) a , #myID li:nth-child(1) a, #myID li:nth-child(2) a , #myID li:nth-child(3) a 
{ 
border-color: #636393; 
} 

#nav li:nth-child(2) a { 
border-color: #B5222D; 
} 
#nav li:nth-child(3) a { 
border-color: #D4953C; 
} 
#nav li:nth-child(4) a { 
border-color: #609491; 
} 
#nav li:nth-child(5) a { 
border-color: #87A248; 
} 

#nav li:nth-child(1) a:hover { 
border-bottom: 35px solid #636393; 
height: 9px; 
color: #fff; 
} 

#nav li:nth-child(2) a:hover { 
border-bottom: 35px solid #B5222D; 
height: 9px; 
color: #fff; 
} 
#nav li:nth-child(3) a:hover { 
border-bottom: 35px solid #D4953C; 
height: 9px; 
color: #fff; 
} 

#nav li:nth-child(4) a:hover { 
border-bottom: 35px solid #609491; 
height: 9px; 
color: #fff; 
} 

#nav li:nth-child(5) a:hover { 
border-bottom: 35px solid #87A248; 
height: 9px; 
color: #fff; 
} 



.menu li{ 
list-style: none; 
float: left; 
position: relative; 
height: 40px; 
} 

.menu>li{ 
background-color: #a82222; 
background-image: -webkit-linear-gradient(#a82222, #670000); 
background-image: -moz-linear-gradient(#a82222, #670000); 
background-image: -o-linear-gradient(#a82222, #670000); 
background-image: linear-gradient(#a82222, #670000); 
border-left: 1px solid #5f5f5f; 
border-right: 1px solid #7e0000; 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
} 

.menu li:first-child{ 
border-radius: 3px 0px 0px 3px; 
border-left: none; 
} 

.menu li:last-child{ 
border-radius: 0px 3px 3px 0px; 
border-right: none; 
} 

.menu a{ 
display: block; 
text-decoration: none; 
color: white; 
text-transform: uppercase; 
padding: 0 20px; 
font-family: 'Verdana', arial; 
margin: 0; 
position: relative; 
font-size: 12px; 
line-height: 40px; 
} 

.menu li:hover{ 
-webkit-box-shadow: inset 0 0 10px #470000; 
-moz-box-shadow: inset 0 0 10px #470000; 
box-shadow: inset 0 0 10px #470000; 
background-color: #a82222; 
background-image: -webkit-linear-gradient(#911212, #670000); 
background-image: -moz-linear-gradient(#911212, #670000); 
background-image: -o-linear-gradient(#911212, #670000); 
background-image: linear-gradient(#911212, #670000); 
} 

.menu li:hover span:after{ 
-webkit-transform: rotate(180deg); 
-moz-transform: rotate(180deg); 
transform: rotate(180deg); 
} 

ul.menu-hover{ 
visibility: hidden; 
position: absolute; 
top:100%; 
opacity: 0; 
height: 0; 
width: 150px; 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
transition: all 0.3s ease-in-out; 
} 

.menu li:hover .menu-hover{ 
visibility: visible; 
height: 100%; 
opacity: 1; 
} 

.menu-hover li{ 
height: 100%; 
border-bottom: 1px solid #696969; 
background-color: #2a2a2a; 
border-left: none; 
border-right: none; 
} 

.menu-hover li:hover{ 
background-image: -webkit-linear-gradient(#2a2a2a, #434343); 
background-image: -moz-linear-gradient(#2a2a2a, #434343); 
background-image: -o-linear-gradient(#2a2a2a, #434343); 
background-image: linear-gradient(#2a2a2a, #434343); 
box-shadow: none; 
} 

.menu-hover a{ 
color: white; 
} 

.menu a span:after{ 
content: ""; 
border-left: 3px solid transparent; 
border-right: 3px solid transparent; 
border-bottom: 3px solid white; 
position: absolute; 
top: 30px; 
right: 35px; 

-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
} 

.menu-hover li:first-child, .menu-hover li:last-child{ 
border-radius: 0; 
} 

.menu a:after { 
    background: rgba(255,255,255,.07); 
    content: ""; 
    height: 20px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
}

источник

2013-06-02 18:49:42

попробовать

.menu ul ul { position: absolute; }

это выглядит, как у вас есть только при наведении курсора мыши. Вам не нужно наводить его на зависание.

эх жаль

также попробовать это один первый

ul .menu-hover { position: absolute; }

в своем коде вы имеете ul.menu-парить, там должно быть пространство между ними

источник

2013-06-02 17:50:19 bob

execuse me, где я могу использовать .menu.menu-hover? Я не делал этого –

извините ul.menu-hover, но он может работать лучше .menu .menu-hover, я отредактировал свой пост – bob

Спасибо за ваш ответ, но я попробовал ваши три предложения, но это не сработало –

Выпадающее меню и анимации

ответ

Смежные вопросы