CODEWITHSUNDEEP
htmlcss
Junhan Ouyang
Junhan Ouyang

Reputation: 59

How to make li display in new line

let selector = document.querySelector('.activate')

selector.addEventListener('mouseover', function(){
    document.querySelector('#hidden-li').classList.remove("hidden")
})

selector.addEventListener('mouseleave', function(){
    document.querySelector('#hidden-li').classList.add("hidden")
})
.menu-list{
    width: 40%;
    margin: 0 auto;
  border: 1px solid black

}

.menu-list ul{
    display: flex;
    flex-shrink: 0;
    padding: 0;
    justify-content: space-evenly;
    list-style-type: none;
    flex-wrap: wrap;
    margin-bottom: 0;

}
.menu-list ul li{

    text-align: center;
    flex: 1;
  border: 1px solid purple
  width: 20%
}
.menu-list ul li a{
    font-size: 1.2rem;
    text-decoration: none;
    color: black;
}

.hidden {
    display: none;
}
<div class = "menu-list">
        <ul>
            <li><a>TEMP1</a></li>
            <li><a>TEMP2</a></li>
            <li class = "activate"><a>TEMP3</a></li>
            <li><a>TEMP4</a></li>
            <li><a>TEMP5</a></li>
            <li id = "hidden-li" class = "hidden"><a>TEMP6</a></li>
        </ul>
    </div>

I have a menu list. When you look at it, there will be total 5 li in same line. Now when I mouseover the Temp3, the li Temp6 will be shown. However no matter how I tried I cannot get the thing display in new line. The flex container always shrink the size of other li. I have tried to set flex-shrink to zero, make sure flex-wrap is enabled, width: 20%; How else I can try to solve my problem?

Upvotes: 0

Views: 804

Answers (1)

Ihab TALEB
Ihab TALEB

Reputation: 57

As far as i understand, you want to keep the first 5 elements on the same line and the 6th elememt on a new line... In order to do that, you need to set "display" to "inline" instead of "flex" and for the last element you need to set "display" to "block", in that way you can achieve the desired output...

The following is a simplified css example:

ul li {
    display:inline;
    color:red;
}
ul li:last-child {
    display:block;
    color:green;
}

So the last element will have a style of either "display:none" or "display:block"

Upvotes: 1

Related Questions