Answers for "dropdown in html and css"

-1

css dropdown

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
Posted by: Guest on March-20-2020
0

dropdown in html and css

<div id="container">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">WordPress</a>
                <!--Fridt Tier Drop Down-->
                <ul>

                    <li><a href="">Theme</a></li>
                    <li><a href="">Plugins</a></li>
                    <li><a href="">Tutorials</a></li>

                </ul>
                <li><a href="">Web Design</a>

                    <!--First Tier Drop Down-->
                    <ul>


                        <li><a href="">Resource</a></li>
                        <li><a href="">Links</a></li>
                        <li><a href="">Tutorials</a>

                            <!--Second Tier Drop Down-->

                            <ul>

                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">Outher</a>

                                    <!-- Third Tier Drop Down-->
                                    <ul>

                                        <li><a href="">Stuff</a></li>
                                        <li><a href="">Things</a></li>
                                        <li><a href="">Outher Stuff</a></li>

                                    </ul>

                                </li>

                            </ul>

                        </li>

                    </ul>

                </li>
                <li><a href="">Graphic Design</a></li>
                <li><a href="">Inspiration</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">About</a></li>
            </ul>
        </nav>
    </div><!--End HTML Code-->
Posted by: Guest on October-22-2021

Browse Popular Code Answers by Language