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
Post a Comment