I have heard that there are features in HTML5 and CSS3 to implement a dropdown list which expands on hover, without using list tags such as and .
But I am very confused as to how exactly go about it. Is it something related to flex ?
3
-
1You can use any element you wish (within reason) when creating dropdowns. There's no reason why you couldn't use div tags or spans... It's just that lists are more semantic. I don't really understand what you're trying to achieve, maybe have a look through a tutorial and see how you go? inspirationalpixels.com/tutorials/…Aaron Lavers– Aaron Lavers2016-06-09 05:01:42 +00:00Commented Jun 9, 2016 at 5:01
-
Is your goal tho build a costume, own dropdown without using the select? I don't really understand what you want to do? Explain this please a little bit closer. Thanks and cheers.webta.st.ic– webta.st.ic2016-06-09 05:44:48 +00:00Commented Jun 9, 2016 at 5:44
-
Can you please give us an answer?webta.st.ic– webta.st.ic2016-06-09 07:55:30 +00:00Commented Jun 9, 2016 at 7:55
Add a comment
|
1 Answer
here is a dropdown only with HTML, CSS3 and DIVs without lists and without javascript, jquery etc. I hope this is alright for you. Cheers :)
.mainMenu {
display: flex;
flex-direction: column;
overflow: hidden;
width: 200px;
height: 30px;
background-color: darkgrey;
color: black;
font-family: Arial;
line-height: 30px;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
.mainMenu:hover {
color: white;
background-color: #2f6992;
cursor: pointer;
height: 150px;
}
.subMenu {
width: 100%;
height: 30px;
padding-left: 5px;
}
.subMenu:hover {
color: yellow;
}
.title {
color: white;
background-color: darkgrey;
width: 100%;
height: 30px;
padding-left: 5px;
}<div class="mainMenu">
<span class="title">HOVER HERE...</span>
<div class="subMenu">Menu 1</div>
<div class="subMenu">Menu 2</div>
<div class="subMenu">Menu 3</div>
</div>