html - How do I make a CSS dropdown menu with my CSS? -

I have a problem with my code I have a header (a simple, still good) Down menu, I do not want to change my code completely, I do not use a list because most people do their drop down menu, and I do not want to use a list.

Here's my code:

  & lt;! - Navigation bar - & gt; & Lt; Div class = "navbar" & gt; & Lt; Div class = "button_l" & gt; & Lt; A href = "Main_Page.html" & gt; Home & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "button" & gt; & Lt; A href = "about.html" & gt; & Lt; / A & gt; & Lt; / Div & gt; About & lt; Div class = "button" & gt; & Lt; A href = "History.html" & gt; History & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "button" & gt; & Lt; A href = "breakdown.html" & gt; Breakdown & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "button_r" & gt; & Lt; A href = "#" & gt; Yes & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Here is the CSS that goes with it:

  .navbar {width: 90%; Height: 30px; Font-family: 'press start 2p', cursor; Font-size: 15px; Line-height: 25px; Status: Completed; Border: 2px solid; Boundary-radius: 250px; Background: URL ("../ images / navbar.png") Repeat-x; Margin-left: 50px; } .button a {float: left; Width: 20%; Height: 30px; Text align: center; Text-decoration: None; } .button_l a {float: left; Width: 20%; Height: 30px; Text align: center; Text-decoration: None; } .button_r a {float: left; Width: 20%; Height: 30px; Text align: center; Text-decoration: None; }. Button: Hover {float: left; Color: #fff; Width: 20%; Height: 30px; Text align: center; Text-decoration: None; Background: URL ("../ images / navbar_roll.png") Repeat-x; } .button_l a: hover {float: left; Color: #fff; Width: 20%; Height: 30px; Text align: center; Text-decoration: None; Border-top-left-radius: 250px; Border-bottom-left-radius: 250px; Background: URL ("../ images / navbar_roll.png") Repeat-x; } .button_r a: hover {float: left; Color: #fff; Width: 20%; Height: 30px; Text align: center; Text-decoration: None; Border-top right-radius: 250px; Border-bottom right-radius: 250px; Background: URL ("../ images / navbar_roll.png") Repeat-x; }  

I use the button_la for the left button, the button for the middle button, and the button_r for the right button I prefer for the "breakdown" button, possibly two or three Pages must be enabled in the drop down menu. How can I do this without tagging ul and li?

Thanks

Also, no javascript please, not just simple and pure HTML and CSS.

You can do this

Add the following CSS

 . Button {status: relative; } .sub- Menu {status: absolute; top 100%; Left: -10000px; }. Button: Hover .sub- Menu {left: 0; }  

should look like this