How to remove border radius for the second ul li-CodePudding

I need little bit CSS help, with the menu below. I want to remove the border-radius for the inner li or second ul li:childs? I tried with: #select-number-of-rooms ul li:first-child, and set border-radius only for the first child but it didn't work.

Any help is appreciated, thank you!

#select-number-of-rooms ul {
  list-style: none;
}

#select-number-of-rooms ul li {
  color: #666;
  display: inline-block;
  padding: 1rem;
  position: relative;
  transition:0.3s;
  border-radius:8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width:300px;
  background-color:#FFF;
}
#select-number-of-rooms ul li ul {
    display: none;
  }
#select-number-of-rooms ul li:hover {
  cursor: pointer;
  background: red;
  color: #fff;
  
}
#select-number-of-rooms ul li:hover ul {
  display: block;
  position: absolute;
  left: 0;
  width: 200px;
  margin-top: 1rem;

}
#select-number-of-rooms ul li:hover ul li {
  display: block;
  background: red;
  transition:0.3s;
}
#select-number-of-rooms ul li:hover ul li:hover {
  background:red;
  color: white;

}

#select-number-of-rooms ul li:hover ul li span {
  float: right;
  color: #fff;
  background: red;
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 5px;
}

#select-number-of-rooms ul li:hover ul li:hover span {
  background: red;
}

                <div id="select-number-of-rooms">
                    Wohnungen
                    <ul>
                        <li><span >Select rooms</span>
                            <ul>
                                <li>1. Floor <input type="number"  min="1" max="7"/></li>
                                <li>1. Floor <input type="number"  min="1" max="7"/></li>
                                <li>1. Floor <input type="number"  min="1" max="7"/></li>
                            </ul>
                        </li>
                    </ul>
                </div>

CodePudding user response：

I updated your css file like that

#select-number-of-rooms ul {
  list-style: none;
}

#select-number-of-rooms ul li {
  color: #666;
  display: inline-block;
  padding: 1rem;
  position: relative;
  transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 300px;
  background-color: #fff;
}
#select-number-of-rooms > ul > li {
  border-radius: 8px;
}
#select-number-of-rooms ul li ul {
  display: none;
}
#select-number-of-rooms ul li:hover {
  cursor: pointer;
  background: red;
  color: #fff;
}
#select-number-of-rooms ul li:hover ul {
  display: block;
  position: absolute;
  left: 0;
  width: 200px;
  margin-top: 1rem;
}
#select-number-of-rooms ul li:hover ul li {
  display: block;
  background: red;
  transition: 0.3s;
}
#select-number-of-rooms ul li:hover ul li:hover {
  background: red;
  color: white;
}

#select-number-of-rooms ul li:hover ul li span {
  float: right;
  color: #fff;
  background: red;
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: 0.8rem;
}

#select-number-of-rooms ul li:hover ul li:first-child {
  border-radius: 5px 5px 0 0;
}

#select-number-of-rooms ul li:hover ul li:last-child {
  border-radius: 0 0 5px 5px;
}

#select-number-of-rooms ul li:hover ul li:hover span {
  background: red;
}

<div id="select-number-of-rooms">
  Wohnungen
  <ul>
    <li><span >Select rooms</span>
      <ul>
        <li>1. Floor <input type="number"  min="1" max="7" /></li>
        <li>1. Floor <input type="number"  min="1" max="7" /></li>
        <li>1. Floor <input type="number"  min="1" max="7" /></li>
      </ul>
    </li>
  </ul>
</div>

CodePudding user response：

You have declared #select-number-of-rooms ul li { border-radius:8px; } and that will impact all the nested li within #select-number-of-rooms, with that in mind your approach looks correct but is missing the : hover selector, if you include border-radius: 0; to #select-number-of-rooms ul li: hover ul li, that would do the trick for the 2nd set of ul>li

in short:

#select-number-of-rooms ul li:hover ul li {
    border-radius: 0;
}