I am trying to create an expanding list that drops relative to the parent's position. Right now, I have set the position to absolute, which lines up the lists incorrectly. When I change it to relative positioning, I get the desired result but there is a weird space on my lists. Here is what I currently have:
the desired result without the space
Is it possible to maintain the positioning and eliminate the space it creates? Thanks, everyone.
Here is my code:
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { background-image: url(images/background.png); } nav { width: 250px; position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.25); border-radius: 10px; box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4); } nav ul { position: relative; list-style-type: none; } nav ul li p { display: flex; align-items: center; font-family: arial; font-size: 1.1em; text-decoration: none; text-transform: capitalize; color: white; padding: 10px 30px; height: 50px; transition: .5s ease; } nav ul li p:hover { background: rgba(0, 0, 0, 0.5); color: white; } nav ul ul { position: absolute; left: 250px; width: 200px; top: 0; background: rgba(75, 136, 162, 0.9); border-radius: 5px; box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4); display: none; } nav ul span { position: absolute; right: 20px; font-size: 1.5em; } nav ul .dropdown { position relative; } nav ul .dropdown:hover> ul { display: inline-block; } nav ul .dropdown-two ul { position: relative; left: 200px; cursor: pointer; } nav ul .dropdown-two:hover ul { display: inline-block; }
<! DOCTYPE html > <html lang = "en" dir = "ltr" > <head > <meta charset = "utf-8" > <link rel = "stylesheet" href = "master.css" > <title > < / title > < / head> <body > <nav > <ul class = "" > <li class = "dropdown" > <p > Frozen Food <span > & rsaquo; < / span > < / p > <ul > <li > <p > Hamburger Patties < / p > < / li > <li class = "dropdown-two" > <p > Fish Fingers <span > & rsaquo; < / span > < / p > <ul class = "" > <li > <p > Fish Fingers (500 Grams) < / p > < / li > <li > <p > Fish Fingers (1000 Grams) < / p > < / li > < / ul > < / li > <li > <p > Shelled Prawns < / p > < / li > <li class = "dropdown-two" > <p > Tub Ice Cream <span > & rsaquo; < / span > < / p > <ul class = "" > <li > <p > Tub Ice Cream (1 Litre) < / p > < / li > <li > <p > Tub Ice Cream (2 Litre) < / p > < / li > < / ul > < / li > <li > <p > Fresh Food < / p > < / li > <li > <p > Beverages < / p > < / li > <li > <p > Home Health < / p > < / li > <li > <p > Pet Food < / p > < / li > < / ul > < / nav > < / body > < / html >