html/css Dropdown list in a navbar is not appearing

Question

I have created a position:fixed; navbar at the top of my web page and one of its items is supposed to be a drop down list named "services" which is supposed to show the dropdown on hover but its not working.

Below is the HTML page code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>

</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
    <li><a href="">HOME</a></li>
    <li><a href="about/about.html">ABOUT US</a></li>
    <li >
        <a class="dropdown" href="">SERVICES</a>
        <div class="dropdownlist">
            <a href="">AUDIT & ASSURANCE</a>
            <a href="">TAXATION</a>
            <a href="">CORPORATE FINANCE</a>
            <a href="">SERVICES</a>
            <a href="">MANAGEMENT CONSULTING</a>
            <a href="">RISK MANAGEMENT</a>
            <a href="">SECTORS</a>
            <a href="">HUMAN RESOURCES</a>
            <a href="">ACCOUNTING, AUDIT & TAX</a>
        </div>
    </li>
    <li><a href="">PARTNERS</a></li>
    <li><a href="">CONTACT US</a></li>
</ul>
</div>  
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>

</div>
</body>
</html>

And here is the CSS stylesheet code:

body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}

.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0; 
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}

.nav li a:hover {
background-color:black;

}

.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover .dropdownlist {
display: block;
}

refer this link : stackoverflow.com/questions/21997728/…

chirag
– chirag

2016-07-27 07:04:08 +00:00
Commented Jul 27, 2016 at 7:04 — chirag
– chirag, Commented Jul 27, 2016 at 7:04

LS_ · Accepted Answer · 2016-07-27 07:05:49Z

This code does not work because dropdownlist is not a child of dropdown, they're just adjacent elements so you need to use the + sign in order to achieve what you want.

Here's a working example:

body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}

.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0; 
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}

.nav li a:hover {
background-color:black;

}

.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover + .dropdownlist,
.dropdownlist:hover {
display: block;
}

<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
    <li><a href="">HOME</a></li>
    <li><a href="about/about.html">ABOUT US</a></li>
    <li >
        <a class="dropdown" href="">SERVICES</a>
        <div class="dropdownlist">
            <a href="">AUDIT & ASSURANCE</a>
            <a href="">TAXATION</a>
            <a href="">CORPORATE FINANCE</a>
            <a href="">SERVICES</a>
            <a href="">MANAGEMENT CONSULTING</a>
            <a href="">RISK MANAGEMENT</a>
            <a href="">SECTORS</a>
            <a href="">HUMAN RESOURCES</a>
            <a href="">ACCOUNTING, AUDIT & TAX</a>
        </div>
    </li>
    <li><a href="">PARTNERS</a></li>
    <li><a href="">CONTACT US</a></li>
</ul>
</div>  
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</div>

rockey dsouza · Accepted Answer · 2016-07-27 07:08:20Z

Below is the code. hope this will help you.

body {
background-color:white;
}

.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}

ul.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0; 
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px; float:left;
}
ul.nav li {
float:left;
}
ul.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}

ul.nav li a:hover {
background-color:black;

}

ul.nav li ul.dropdownlist {
display: none;
background-color: #ccc;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; right:0; top:38px;
}
ul.nav li:hover ul.dropdownlist {
display: block;
}
ul.nav li ul.dropdownlist li a {
color:#333;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>

</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
    <li><a href="">HOME</a></li>
    <li><a href="about/about.html">ABOUT US</a></li>
    <li>
        <a class="dropdown" href="">SERVICES</a>
        <ul class="dropdownlist">
            <li><a href="">AUDIT & ASSURANCE</a></li>
            <li><a href="">TAXATION</a></li>
            <li><a href="">CORPORATE FINANCE</a></li>
            <li><a href="">SERVICES</a></li>
            <li><a href="">MANAGEMENT CONSULTING</a></li>
            <li><a href="">RISK MANAGEMENT</a></li>
            <li><a href="">SECTORS</a></li>
            <li><a href="">HUMAN RESOURCES</a></li>
            <li><a href="">ACCOUNTING, AUDIT & TAX</a></li>
        </ul>
    </li>
    <li><a href="">PARTNERS</a></li>
</ul>
</div>  
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>

</div>
</body>
</html>

KanUXD · Accepted Answer · 2016-07-27 07:12:45Z

0

Below change will help you only to show drop down on hover but you need to make few CSS changes in order to display the drop down properly

You need replace the following CSS

.nav .dropdown:hover .dropdownlist {
display: block;
}

With

.nav .dropdown:hover + .dropdownlist {
display: block;
}

edited Jul 27, 2016 at 7:12

answered Jul 27, 2016 at 7:03

KanUXD

7075 silver badges12 bronze badges

Collectives™ on Stack Overflow

html/css Dropdown list in a navbar is not appearing

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related