list - css dropdown menu keeps expanding main -


I just created my first CSS drop down menu and I'm very proud of it, but I have a problem when The submenu is expanding, it pulls the main ul, and I do not want it ... this should be the height i have given ... so the purple division remains down in one place even if the submenu is spreading .. thank you

Here is the JSfield Link

This is my code

    

And here's my CSS

  ul.menu {text-align: center; Display: Table; Width: 100%; Height: 48px; Line-height: 48px; Border: 1px solid red; } Ul.menu li {background: yellow; Exhibit: Table-Cell; Border: 0 px solid yellow; } Ul.menu li {display: block; Background: blue; } Ul.menu li a: Hover {display: block; Background: purple; } .submenu {display: none; }. Menu li: hover .submenu {display: block; } Ul.submenu {text-align: center; } Ul.submenu li {display: block; Text-align: center; Background: green; Border: 0px; } Ul.submenu li a {color: red; Text-align: center; Background: pink; } Ul.submenu li a: Hover {Color: Red; Text-align: center; Background: orange; }    

simply add:

status: complete ; your .submenu category



Comments

Popular posts from this blog

excel vba - How to delete Solver(SOLVER.XLAM) code -

github - Teamcity & Git - PR merge builds - anyway to get HEAD commit hash? -

ios - Replace text in UITextView run slowly -