如何使下拉菜单的宽度与每个菜单相同<li>在导航？</li>

Question

我正在尝试创建一个下拉菜单，但由于某种原因，我找不到使其宽度与导航中的每个<li>相同的方法。

 /* GENERAL STYLES */ * { margin: 0px; padding: 0px; } body { background-image: url("../img/paven.png"); } @font-face { font-family: "nevis"; src: url("../fonts/nevis.ttf"); } /* MENU */ nav { width: 100%; height: 40px; background-color: #333; } nav > div { width: 1000px; margin: 0px auto; } nav > div > ul { float: left; } nav > div > ul > li { list-style: none; height: 40px; padding-left: 20px; padding-right: 20px; border-right: 1px solid gray; } nav > div > ul > li > a { display: block; height: 40px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: white; line-height: 35px; } nav > div > ul > li:hover { cursor: pointer; background-color: #70B231; } /* SUBMENU */ nav > div > ul > li > ul { position: absolute; width: 100px; background-color: #70B231; }

 <!-- MENU --> <nav> <div> <ul> <li><a href="#">Home</a></li> </ul> <ul> <li><a href="#">Content</a></li> </ul> <ul> <li><a href="#">Requirements</a></li> </ul> <ul> <li> <a href="#">Languages</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </li> </ul> <ul> <li> <a href="#">Frameworks</a> <ul> <li><a href="#">Less</a></li> <li><a href="#">Sass</a></li> <li><a href="#">Flexbox</a></li> </ul> </li> </ul> <ul> <li><a href="#">Projects</a></li> </ul> <ul> <li><a href="#">Instructor</a></li> </ul> <ul> <li><a href="#">Reviews</a></li> </ul> <ul> <li><a href="#">Blog</a></li> </ul> <ul> <li><a href="#">Contact</a></li> </ul> </div> </nav>

如您所见，我尝试为每个<ul>设置一个宽度，但它们与它们所属的<li>没有很好地对齐：

我想实现这样的目标：

Answer 1

在这里你 go，我编辑了一些东西。

我删除了主菜单li元素上的padding并将其放在a上，以便子菜单可以占据整个宽度。

新增postition: relative; 到主菜单li所以子菜单postition: absolute将相对于主菜单项

使子菜单全宽， width 100% ，并删除列表 styles。

向子菜单li添加了一些padding

 /* GENERAL STYLES */ * { margin: 0px; padding: 0px; } body { background-image: url("../img/paven.png"); } @font-face { font-family: "nevis"; src: url("../fonts/nevis.ttf"); } /* MENU */ nav { width: 100%; height: 40px; background-color: #333; } nav>div { width: 1000px; margin: 0px auto; } nav>div>ul { float: left; } nav>div>ul>li { list-style: none; height: 40px; position: relative; border-right: 1px solid gray; } nav>div>ul>li>a { display: block; height: 40px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: white; line-height: 35px; padding-left: 20px; padding-right: 20px; } nav>div>ul>li:hover { cursor: pointer; background-color: #70B231; } /* SUBMENU */ nav>div>ul>li>ul { position: absolute; width: 100%; background-color: #70B231; list-style: none; } nav>div>ul>li>ul>li { padding: 3px 10px; }

 <!-- MENU --> <nav> <div> <ul> <li><a href="#">Home</a></li> </ul> <ul> <li><a href="#">Content</a></li> </ul> <ul> <li><a href="#">Requirements</a></li> </ul> <ul> <li> <a href="#">Languages</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </li> </ul> <ul> <li> <a href="#">Frameworks</a> <ul> <li><a href="#">Less</a></li> <li><a href="#">Sass</a></li> <li><a href="#">Flexbox</a></li> </ul> </li> </ul> <ul> <li><a href="#">Projects</a></li> </ul> <ul> <li><a href="#">Instructor</a></li> </ul> <ul> <li><a href="#">Reviews</a></li> </ul> <ul> <li><a href="#">Blog</a></li> </ul> <ul> <li><a href="#">Contact</a></li> </ul> </div> </nav>