Changing from display hidden to display block when on focus not working-CodePudding

I'm trying to make my "searchbardropdown" show up when the "searchbarinput" is clicked, but this is not working. Does anyone know what is wrong with it? Thanks! In the picture, you can see that the background color changes when the input is in focus, but the dropdown does not show.

CSS:

    display: none;
  }
  .searchbarinput:focus .searchbardropdown{
    display: block;
  }
  .searchbarinput:focus{
    background-color: red;
  }

HTML:

 <div >
            <script src="searchbar.js"></script>
            <div >
            </div><input  id="searchbarinput" type="text" placeholder="Pesquisar.."><button  type="submit"><i >search</i></button>
            <div >
                <a  href="#">// Trocar Variaveis<br></a>
                <a  href="#trocarvariaveis">// Celsius para Farenheit<br></a>
                <a  href="#celsiusparafarenheit">// Farenheit para Celsius<br></a>
                <a  href="#farenheitparacelsius">// Area Circulo<br></a>
                <a  href="#areacirculo">// Par ou Impar<br></a>
                <a  href="#parouimpar">// Intervalo entre numeros<br></a>
                <a  href="#intervalo">// Intervalo entre maior e menor de vetor<br></a>
                <a  href="#intervalovetor">// Maior e menor numero<br></a>
                <a  href="#maiormenor">// Paisagem ou retrato<br></a>  
                <a  href="#paisagemouretrato">// Fizz ou Buzz<br></a>
                <a  href="#fizzbuzz">// String do objeto<br></a>
                <a  href="#stringobject">// Par ou impar ate limite<br></a>
            </div>
        </div>

CodePudding user response：

You should use tilt(~) selector to select the sibling.

  .searchbardropdown{
    display: none;
  }
  .searchbarinput:focus ~ .searchbardropdown{
    display: block;
  }
  .searchbarinput:focus{
    background-color: red;
  }

 <div >
            <script src="searchbar.js"></script>
            <div >
            </div><input  id="searchbarinput" type="text" placeholder="Pesquisar.."><button  type="submit"><i >search</i></button>
            <div >
                <a  href="#">// Trocar Variaveis<br></a>
                <a  href="#trocarvariaveis">// Celsius para Farenheit<br></a>
                <a  href="#celsiusparafarenheit">// Farenheit para Celsius<br></a>
                <a  href="#farenheitparacelsius">// Area Circulo<br></a>
                <a  href="#areacirculo">// Par ou Impar<br></a>
                <a  href="#parouimpar">// Intervalo entre numeros<br></a>
                <a  href="#intervalo">// Intervalo entre maior e menor de vetor<br></a>
                <a  href="#intervalovetor">// Maior e menor numero<br></a>
                <a  href="#maiormenor">// Paisagem ou retrato<br></a>  
                <a  href="#paisagemouretrato">// Fizz ou Buzz<br></a>
                <a  href="#fizzbuzz">// String do objeto<br></a>
                <a  href="#stringobject">// Par ou impar ate limite<br></a>
            </div>
        </div>