I have a very simple menu that I set up in css, I wanted to know if I can identify the <li>
that is tagged with selected
and apply the hover effect that is in the .horizontal-menu li:hover
class.
.top_menu {
width: 100%;
}
.top_menu:after {
content: "";
display: table;
clear: both;
}
ul.horizontal-menu, .horizontal-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.horizontal-menu {
float: left;
width:100%;
background: #616161;
}
.horizontal-menu li {
float: left;
display: block;
padding: 20px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #616161;
cursor: pointer;
}
.horizontal-menu li .material-icons {
margin: -10px;
}
.hideshow ul li {
width: 260px;
text-align: center;
}
.horizontal-menu li:hover {
border-bottom: 3px solid rgb(246,83,20);
padding-bottom: 17px;
background: #484848;
}
.horizontal-menu li.hideshow ul {
position:absolute;
display:none;
left: -203px;
width: 300px;
}
.horizontal-menu li.hideshow {
position:relative;
}
.hideshow ul {
padding-top: 7px;
padding-bottom: 7px;
background: #616161;
border-radius: 4px 4px 4px 4px;
margin-top: 25px;
}
.top_menu_extra {
background-color: #616161;
width: 100%;
display: none;
border: 0 solid #484848;
border-top-width: 1px;
}
<div class="top_menu">
<ul class="horizontal-menu">
<li data-link="http://www.google.com" selected>MENU 1</li>
<li data-link="http://www.google.com">MENU 2</li>
<li data-link="http://www.google.com">MENU 3</li>
<li data-link="http://www.google.com">MENU 4</li>
<li data-link="http://www.google.com">MENU 5</li>
<li data-link="http://www.google.com">MENU 6</li>
</ul>
</div>