Apply a class to the Selected tag

Asked

Viewed 23 times

0

Well I have a very simple menu that I put together in css, I was wondering if you have how to identify the <li> that is tagged selected and apply the effect of the Hover that is in the class .horizontal-menu li:hover.

.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>

css css3

1 answer

2


You can use li[selected] selector, but I suggest doing this with CSS classes and then using li.selected on the selector.

But as I mentioned with li[selected] works, ie:

.horizontal-menu li:hover, li[selected] {
    border-bottom: 3px solid rgb(246,83,20);
    padding-bottom: 17px;
    background: #484848;
}

Example:

.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, li[selected] {
    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>

  • 1

    Vlw, very good it was that same, As soon as the time release I sea your answer ok.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.