Почему ширина моего подменю не будет постоянной? - PullRequest
Новая
       50

Почему ширина моего подменю не будет постоянной?

1 голос
/ 16 июня 2019

Не получается, чтобы все мои подменю были такой же ширины, как и меню "Знакомство с командой". Я попытался определить min-width и width для ul li li, но ни один из них не работает должным образом. Буду признателен за любую помощь в коде, и я также хотел бы знать, почему свойства ширины не будут работать. 

ul {
    list-style: none;
    line-height: 1em;
    text-align: center;
}

li {
    display: inline-block;
    margin-left: 20px;
    position: relative;
    float: center;
    transition-duration: 0.5s;
}

ul li li {
    margin-top: 25px;
    width: 100% !important;
    left:-70px;
}

ul li ul {
    visibility: hidden;
    overflow:hidden;
    opacity: 0;
    position: absolute !important;
    transition: all 0.5s ease;
}

ul li:hover > ul{
    visibility: visible;
    opacity: 1;
}

ul li a {
    background: #414a52;
    color: #FFFFFF;
    padding: 12px 24px;
}

ul li a.active {
    background: #0a304e;
    color: #FFFFFF;
}

ul li a:hover {
    background: #0a304e;
    color: #FFFFFF;
}
<ul>
    <li><a class="active" data-filter="*" href="#">About</a></li>
    <li><a data-filter=".web" href="#">Meet the Team</a>
        <ul>
            <li><a href="#">Officers</a></li>
            <li><a href="#">Consumer</a></li>
            <li><a href="#">FIGs &amp; REITs</a></li>
            <li><a href="#">Healthcare</a></li>
            <li><a href="#">Industrials</a></li>
            <li><a href="#">Technology</a></li>
        </ul>
    </li>
    <li><a data-filter=".photography" href="#">Work Samples</a></li>
    <li><a data-filter=".product" href="#">Connect</a></li>
</ul>

1 Ответ

0 голосов
/ 16 июня 2019

Вы не определили ссылку внутри раскрывающейся ширины, для этого вы используете заполнение, чтобы добиться того, что вам нужно определить ширину раскрывающихся ссылок, чтобы соответствовать родительскому ul, и установить ширину родительского ul, чтобы соответствовать элементу зависания.Я исправляю, что вы можете видеть это по этой ссылке https://jsfiddle.net/Lhud8yv3/4/

CSS: 

ul li li a{
   display: inline-block;
   width: 100%;
 }

Также я удалил код из ul li li для поля и левой позиции.Возможно, вы могли бы использовать некоторые имена классов для определения меню и выпадающих меню, чтобы вы могли легко получить к ним доступ, используя CSS позже в JS, вместо использования ul li li a.Я бы предложил использовать БЭМ: http://getbem.com/naming/

...