Add a dropdown menu to the following code (html and css): the code is a horizant

ID: 3597506 • Letter: A

Question

Add a dropdown menu to the following code (html and css):

the code is a horizantal navigation bar and the question is to add a dropdown menu when i hover over one of the sections.

<!DOCTYPE html>
<html>
<head>
<style>
.outer ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #dddddd;
}

.outer li {
display: inline-block;
}

.outer li a {
display: inline-block;
padding: 8px;
text-decoration: none;
color: white;
}
.outer li a:hover {
background-color: black;
}

</style>
</head>
<body>

<div class = "outer">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>

</body>
</html>""

Explanation / Answer

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    color: white;
    font-size: 16px;
    cursor: pointer;
list-style-type: none;
    margin: 0;
    min-width: 260px;

    background-color: #dddddd;
    display: inline-block;
    padding: 20px;
    text-decoration: none;
    color: white;
}

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

.dropdown-content {
    display: none;
    position: static;
    right: 0;
    background-color: #f9f9f9;
    min-width: 60px;
    box-shadow: 10px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px;
    text-decoration: none;
    display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: black;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #dddddd;
}

</style>
</head>
<body>

<div class="dropdown">
<ul>
<li><a href="#home" class="dropbtn" >Home</a></li>
<li class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</li></ul>
</div>
<div class="dropdown">
<ul>
<li><a href="#home" class="dropbtn" >News</a></li>
<li class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</li>
</div>
<div class="dropdown">
<ul>
<li><a href="#home" class="dropbtn" >Contact</a></li>
<li class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</li>
</div>
<div class="dropdown">
<ul>
<li><a href="#home" class="dropbtn" >About</a></li>
<li class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</li>
</div>
</body>
</html>

Navigate

Add a draw() method to your Horse class. You will also need to create a couple o

Add a due date to the Invoice application 1. Import the project named ch15 exLIn

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Add a dropdown menu to the following code (html and css): the code is a horizant

Question

Explanation / Answer

Related Questions

Navigate