CODEWITHSUNDEEP
htmlcss
prachi sharma
prachi sharma

Reputation: 1

drop down menu html css not working

why is my drop down menu not working? attaching image with the code. what additions do i need to add in oder to make the dropdown menu work the output is somewhat like this exams java c c++ the is not drop down menu.

html code :

<html>
<head>
    <title> Website Design </title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <div class="nav">
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Exams </a>
                    <ul>
                        <li>
                            <a href="">JAVA</a>
                        </li>
                        <li>
                            <a href="">C</a>
                        </li>

                        <li>
                            <a href="">C++</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Review</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

and css code

header{
    background: rgba(0,0,100,0.5);
    height: 100vh;
}

.nav{
    background: rgba(0,0,0,.5);
    height: 80px;
}

.menu{
    float: right;
    list-style: none;
    margin: 20px;
}

.menu li{
    display: inline-block;
    margin: 10px 5px;
}

.menu li a{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    font-family: sans-serif;
    letter-spacing: 2px;
    border-bottom: 1px solid #fff;
}

.menu li a:hover{
    background: coral;
    border-bottom: 1px solid coral;
    transition: .4s;
}

.

Upvotes: 0

Views: 748

Answers (2)

Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

--> Please update following code in your existing file

header{
                background: rgba(0,0,100,0.5);
                height: 100vh;
            }

            .nav{
                background: rgba(0,0,0,.5);
                height: 80px;
            }

            .menu{
                float: right;
                list-style: none;
                margin: 20px;
            }
            
            .menu li{
                display: inline-block;
                margin: 10px 5px;
                position: relative;
            }

            .menu li a{
                text-decoration: none;
                color: #fff;
                padding: 5px 10px;
                font-family: sans-serif;
                letter-spacing: 2px;
                border-bottom: 1px solid #fff;
            }

            .menu li a:hover{
                background: coral;
                border-bottom: 1px solid coral;
                transition: .4s;
            }
            ul.menu  ul {
                visibility: hidden;
                opacity: 0;
                position: absolute;
                padding: 0;
                top: 26px;
                transition: 0.3s ease-in-out;
            }
            ul.menu  ul li {
                margin-left: 0;
                margin-right: 0;
                width: 100%;
            }
            ul.menu > li:hover ul {
                visibility: visible;
                opacity: 1;
            }
<html>
<head>
    <title> Website Design </title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <div class="nav">
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Exams </a>
                    <ul>
                        <li>
                            <a href="">JAVA</a>
                        </li>
                        <li>
                            <a href="">C</a>
                        </li>

                        <li>
                            <a href="">C++</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Review</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

Upvotes: 1

Aryan Twanju
Aryan Twanju

Reputation: 2516

You have not yet added the css code to make the dropdown work. Try this css code with your html to make it work.

header{
    background: rgba(0,0,100,0.5);
    height: 100vh;
}

.nav{
    background: rgba(0,0,0,.5);
    height: 80px;
}

.menu{
    float: right;
    list-style: none;
    margin: 20px;
}

.menu li{
    display: inline-block;
    margin: 10px 5px;
}

.menu li a{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    font-family: sans-serif;
    letter-spacing: 2px;
    border-bottom: 1px solid #fff;
}

.menu li a:hover{
    background: coral;
    border-bottom: 1px solid coral;
    transition: .4s;
}
.menu > li {
  position: relative;
}
.menu > li > ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: red;
  width: 120px;
}
.menu > li > ul > li {
  display: block;
  width: 100%;
}
.menu > li:hover > ul {
  display: block;
}

Upvotes: 0

Related Questions