Как сделать ширину пролета 100% от родительского ли?

Question

как я могу сделать ширину диапазона 100% материнской литий

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
     <span> 
       <a href="#">One</a> 
       <a href="#">Three</a> 
       <a href="#">Four</a> 
     </span> 
    </li> 
    <li><a href="#">Services</a> 
     <span> 
       <a href="#">One</a> 
       <a href="#">Two</a> 
       <a href="#">Three</a> 
     </span> 
    </li> 
    <li><a href="#">Responsibility</a> 
     <span> 
       <a href="#">One</a> 
       <a href="#">Two</a> 
     </span> </li> 
    <li><a href="#">Contact</a></li> 
    </ul> 

У меня есть моя панель навигации, как это. он показывает, как:

что я хочу:

Как я могу добиться этого? Когда я попробовал width:100%; для пролета, он выходил из li и делал каждый диапазон a равным ширине ul.

Answer 1

Как уже упоминалось, просто меняя свой срок и свой якорный тег display: block исправит непосредственную проблему.

li:hover span, li:hover span a { 
 
    display: block; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background: blue; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    background-color: black; 
 
    height: 40px; 
 
    display: flex; 
 
} 
 

 
ul li { 
 
    position: relative; 
 
    line-height: 40px; 
 
    width: 20%; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
span, span a { 
 
    display: none; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
span a { 
 
    border-bottom: 1px solid black; 
 
    text-align: center; 
 
} 
 

 
li:hover, span { 
 
    background: red; 
 
}

<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a> 
 
    <span> 
 
       <a href="#">One</a> 
 
       <a href="#">Three</a> 
 
       <a href="#">Four</a> 
 
     </span> 
 
    </li> 
 
    <li><a href="#">Services</a> 
 
    <span> 
 
       <a href="#">One</a> 
 
       <a href="#">Two</a> 
 
       <a href="#">Three</a> 
 
     </span> 
 
    </li> 
 
    <li><a href="#">Responsibility</a> 
 
    <span> 
 
       <a href="#">One</a> 
 
       <a href="#">Two</a> 
 
     </span> </li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul>

Это происходит потому, что оболочка естественно встроенный элемент, который не заполняет всю ширину его родителей. Когда вы меняете его на display: block, вы говорите ему, что он действует как элемент блока, который заполняет ширину его родителя.

Answer 2

Пожалуйста, попробуйте следующее:

span{ 
    display:block; 
} 

Demo

Answer 3

Пожалуйста, попробуйте ниже стилей

li span {display:block; width: 100%; overflow: hidden;} 
li span a{display: inline-block; float:left;} 

Answer 4

Вы можете добавить дисплей: блок размаху, или сделать его более правильным и изменение он вместо элемента блока, такого как div. Вложение встроенных и блочных элементов внутри встроенного элемента является плохой практикой. Вы можете попробовать, как этот

<li><a href="#">About</a> 
    <div> 
      <a href="#">One</a> 
      <a href="#">Three</a> 
      <a href="#">Four</a> 
    </div> 
</li> 

The CSS

li div a { 
     width: 100%; 
     display: block; 
     box-sizing: border-box; 
     padding: 20px; 
}