Zhamepace Zhamepace - 1 month ago 5
CSS Question

HTML and CSS drop down option

I created a very simple menu bar in HTML with CSS. WEBSITE
I wanted to have a drop-down selection when I hover my mouse in the services link. I wanted these option to be displayed there: OptionA, OptionB, OptionC (sample only).

More power and thank you so much.

My index code and css code below:



#menu {
width: 550px;
height: auto;
padding: 8px 0px;
margin: 0px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}

<html>

<head>
<title>MY WEBSITE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<div align="center">

<body>

<div id="menu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="about.html">About Us</a>
</li>
<li><a href="services.html">Services</a>
</li>
<li><a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</body>

</html>




Answer

you need to give your services li a class of "dropbtn". then create another div with a class of "dropdown-content" and give the three options within anchor elements.

check out this resource http://www.w3schools.com/css/css_dropdowns.asp and look at the last example