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;
}