Creating a dropdown menu

[carthago1]

Hi, I not used the forum for some time. Now I again start with some html and css, I notice I forgot a lot.

I have a navigation bar, but want to include a dropdown menu. Say I want to include a dropdown in the way item 1a, item 1b, etc.

Will be thankful for any of your help.

Coding I have:

<div id="topnavigation">
           <a class="topmenu" href="" title="">home</a>
            <a class="topmenu" href="" title="">item 1</a>
           <a class="topmenu" href="" title="">item 2</a>
         <a class="topmenu" href="" title="">item 3</a>
         <a class="topmenu" href="" title="">item 4</a>
</div>

#topnavigation {
	 overflow:hidden;
	  height: 20px;
  margin:0 -1px;/* no width needed*/
 border-top:1px solid #e0d6a4;
 border-bottom:1px solid #e0d6a4;
 font-size:100%;
 padding-top:5px;
 
 text-align:center;
 text-transform: uppercase;
}
a.topmenu {
    color: #404040;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: none;
}
 
a.topmenu:active, a.topmenu:hover {
    color: #333;
}

[PaulOB]

There’s a good article on css tricks that will take you through the process.

Solved with CSS! Dropdown Menus | CSS-Tricks

If that doesn’t make sense to you then we can step through it one step at a time

[reallybaldoldman]

Hello to carthago1,

here is some HTML what I wrote…

 <input id="menu" type="checkbox" hidden>
 <label for="menu">
  <span>&#9776;</span>
 </label> 

 <ul id="topnavigation">
  <li><a href="#">home</a></li>
  <li><a href="#">item 1</a>
   <ul>
    <li><a href="#">item 1a</a>
    <li><a href="#">item 1b</a>
   </ul>
  </li>
  <li><a href="#">item 2</a>
   <ul>
    <li><a href="#">item 2a</a>
    <li><a href="#">item 2b</a>
   </ul>
  </li>
  <li><a href="#">item 3</a>
   <ul>
    <li><a href="#">item 3a</a>
    <li><a href="#">item 3b</a>
   </ul>
  </li>
  <li><a href="#">item 4</a>
   <ul>
    <li><a href="#">item 4a</a>
    <li><a href="#">item 4b</a>
   </ul>
  </li>
</ul>  

…and used this CSS to make it work…

body {
    background-color: #fff;;
    font: normal 1em / 1.5em  sans-serif;
 }

#menu + label {
   display: none;
   padding: 0.5em;
   background-color: #000;
   font-size: 2em;
   color: #fff;
   text-align: right; 
   cursor: pointer;
 }
#menu + label span {
   transition: 0.5s ease-in-out;
 } 
ul {
   padding: 0;
   margin: 0;
   list-style: none;
 }
#topnavigation {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 1em;
   padding-top: 0.5em;
   text-transform: uppercase;
 }
#topnavigation > li {
   position: relative;
 }
#topnavigation > li ul {
   position: absolute;
   display: none;
   white-space: nowrap;
 }
#topnavigation a {
   display: block;
   font: bold 1em arial, helvetica, sans-serif;
   color: #555;
   text-decoration: none;
 } 
#topnavigation a:hover, 
#topnavigation a:active {
    color: #000;
 }
#topnavigation > li:hover ul,
#topnavigation > li:active ul {
   display: block;
 }
@media ( max-width: 22em ){
#menu + label {
   display: flex;
   justify-content: right;
  }
#topnavigation {
   flex-direction: column;  
   gap: 0.5em; 
   padding-top: 0;
   display: none;
  }
#topnavigation > li ul {
   position: static;
  }
#menu:checked+label span {
   transform: rotateZ( 90deg );
  }
#menu:checked~#topnavigation {
   display: block;
  }
#topnavigation  a {
   padding: 1em;
   border-bottom: 2px solid #000;
   background-image: linear-gradient(to bottom, #fff, #ccc);
  }
#topnavigation a:hover, 
#topnavigation a:active {
   background-image: linear-gradient(to bottom, #ddd, #aaa);
  }
 }

[carthago1]

Thanks for the reply PaulOB and reallybaldoldman,

I will start reading