How to create simple horizontal dropdown CSS menu bar ?

Would you please give me advice, how to create a simple horizontal hover dropdown menu bar, using HTML and CSS ?
posted on 05.06.2019 at 19:29
0pnshow more
onefiveonefive
Hi,

I have a good experience with this CSS solution:

css horizontal hover dropdown menu

<style>

ul#menu, ul#menu ul.sub {
padding:0;
margin: 0;
}

ul#menu li {
list-style-type: none;
display: block;
float: left;
}

ul#menu ul.sub li {
list-style-type: none;
display: block;
}

ul#menu li a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
padding: 0px 15px 0px 15px;
line-height: 38px;
}

ul#menu li ul.sub li a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
float: left;
width: 150px;
padding: 0px 15px 0px;
line-height: 36px;
}

ul#menu li {
position: relative;
}

ul#menu li ul.sub {
display: none;
position: absolute;
top: 38px;
left: 0;
width: 100px;
}

ul#menu li:hover ul.sub {
display: block;
}

.cat {
background-color: #005680;
}

a.cat:hover {
background-color: #0082BF;
}

.subcat {
background-color: #006595;
}

a.subcat:hover {
background-color: #0082BF;
}

</style>


<ul id='menu'>

<li><a href='' class='cat'>Item 1</a>
<ul class='sub'>
<li><a href='' class='subcat'>Subitem A1</a></li>
<li><a href='' class='subcat'>Subitem B1</a></li>
<li><a href='' class='subcat'>Subitem C1</a></li>
</ul>
</li>

<li><a href='' class='cat'>Item 2</a>
<ul class='sub'>
<li><a href='' class='subcat'>Subitem A2</a></li>
<li><a href='' class='subcat'>Subitem B2</a></li>
<li><a href='' class='subcat'>Subitem C2</a></li>
</ul>
</li>

<li><a href='' class='cat'>Item 3</a>
<ul class='sub'>
<li><a href='' class='subcat'>Subitem A3</a></li>
<li><a href='' class='subcat'>Subitem B3</a></li>
<li><a href='' class='subcat'>Subitem C3</a></li>
</ul>
</li>

</ul>


The menu is widely supported and the source code is quite simple.
posted on 07.06.2019 at 18:12
0pnshow more
TimTim
share on facebookshare on twitter
2020 AnswerTabsTermsContact us
This site uses cookies to improve your experience, for analytics and ads. By continuing to browse this site you agree to our use of cookies.