Bir site için bir menü oluşturuyorum, ancak bu iki vurgulu efektin aynı anda çalışmasını sağlayamıyorum. Ben isimleri üzerine gelince harflerin daha parlak gitmesini istiyorum + isimlerin altındaki beyaz blok (aktif olanı değil) solması gerekir ama sadece ilk etkiyi görmem gerekiyor ...HTML iki vurgulu Etkiler çalışmaz

İşte Jsfiddle Görmek. Ben tüm yardımı :) takdir

HTML:

<body> 

    <div id="cssmenu"> 
     <ul> 
      <li class='active'><a href='#'><span>Home</span></a></li> 
      <li><a href='#'><span>Products</span></a></li> 
      <li><a href='#'><span>Company</span></a></li> 
      <li class='last'><a href='#'><span>Contact</span></a></li> 
     </ul> 
    </div> 

</body>

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); 

html { 
    background: url(img/bodybg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#cssmenu { 
    background: rgba(51,51,51,0.5); 
    height: 0.3%; 
    text-align: center; 
} 
#cssmenu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    line-height: 1; 
    display: block; 
    zoom: 1; 
} 
#cssmenu ul:after { 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
#cssmenu ul li { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 
#cssmenu ul li a { 
    color: #C8C8C8; 
    text-decoration: none; 
    display: block; 
    padding: 15px 25px; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 14px; 
    position: relative; 

    -webkit-transition: color .25s; 
    -moz-transition: color .25s; 
    -ms-transition: color .25s; 
    -o-transition: color .25s; 
    transition: color .25s; 


} 
/*Hover Effekt */ 
#cssmenu ul li a:hover { 
    color: #FFFFFF; 
} 
#cssmenu ul li a:hover:before { 
    width: 100%; 
} 
#cssmenu ul li a:before:hover { 
    opacity: 100%; 
} 
/* Kleiner Block nach jeder Spalte */ 
#cssmenu ul li a:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    right: -3px; 
    top: 19px; 
    height: 6px; 
    width: 6px; 
    background: #E6E6E6; 
    opacity: .5; 
} 

/*"Effekt2"*/ 
#cssmenu ul li a:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    width: 100%; 
    background: #FFFFFF; 
    opacity: 100%; 
    -webkit-transition: opacity 0.2s ease-in-out; 
    -moz-transition: opacity 0.2s ease-in-out; 
    -ms-transition: opacity 0.2s ease-in-out; 
    -o-transition: opacity 0.2s ease-in-out; 
    transition: opacity 0.2s ease-in-out; 
} 

/*Aktive Seite Schrift weiß und "Effekt2" aktive*/ 
#cssmenu ul li.active a { 
    color: #FFFFFF; 
} 
#cssmenu ul li.active a:before { 
    width: 100%; 
}

Demo: jsfiddle.net/xwrfmtua

kaynak

2016-04-13 Siegfried Rödelstab