Показать меню в цветную полосу

Question

У меня проблема при попытке вставить свое меню в тег div. Я хочу отобразить темно-синюю полосу (в моем примере называемую Navbar-primary), а внутри этой полосы я хочу отобразить свое меню. На данный момент у меня есть такой результат:

Меню вне полосы

Это html полосы:

<header class="main-header">
    <div class="navbar-secundary">navbar-secundary
    </div>
    <div class="navbar-primary">navbar-primary
        <app-navbar></app-navbar>
    </div>

</header>

(в теге app-navbar у меня есть мое меню)

и это css полосы:

.main-header .navbar-secundary {
    margin-bottom: 1px;
}

.navbar-secundary {
    background-color: 
#000f2f;
color:
    #fff;
    font-family: DINNCondMedium,sans-serif;
    font-weight: 500;
}

header .navbar-secundary .wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


.main-header .nav {
    margin: 0;
    padding: 0;
    display: block;
    letter-spacing: -.31em;
    text-rendering: optimizeSpeed;
}



.main-header > .navbar-primary {
    position: relative;
}

.main-header .navbar-primary, .main-header .navbar-secundary {
    background-color: 
#000f2f;
color:
    #fff;
    font-family: DINNCondMedium,sans-serif;
    font-weight: 500;
}

, а это мое приложение-navbar html:

<nav class="menu">
    <ul class="inline">
        <li><a href="#">Acceuil</a></li>
        <li><a href="#">Nous contacter</a></li>
        <li><a href="#">Nos tarifs</a></li>
        <li><a href="#">L'aquarium</a>
            <ul class="list">
                <li><a href="#">ENTRÉE 1</a></li>
                <li><a href="#">ENTRÉE 2</a></li>
                <li><a href="#">ENTRÉE 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

С помощью app-navbar css:

nav.menu {
    font-family: verdana;
    font-size: 18px;
}

/*
 * on s'occupe ici des dimension du menu
 */
nav.menu ul {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin:0;
    list-style-type: none; /* pour enlever les asterix devant les menu pour de l'esthetique */
}

/*
 * ici on design les sous menu
 */
nav.menu ul li {
    width: 250px; /* taille des case */
    box-sizing: border-box; /*  le padding et la bordure n'augmentent plus la largeur de l'element*/
    height: 60px;
    padding:20px 0px;
    background-color: #EEE; /* on met la couleur gris */
    text-align: center; /* on aligne le text */
    border: 1px solid black; /* on met des bordure noir */
    margin: 20px;
}

nav.menu ul.inline > li {
    float: left;
    background-image: url(/assets/image/dolphin-logo.png); /*you might need to change the url*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: blue;
    /* border-bottom: none; */
}

nav.menu ul.list > li {
    width: 251px;
    float: none;
    border: 1px solid black;
    border-bottom: none;
}

nav.menu ul.list > li:last-child {
    border-bottom: 1px solid black; /* on met une bordure noir en bas de la derniere case de la sous list */ 
}

nav.menu ul ul {
    display: none; /* pour cacher le sous menu lorsque l'on est pas dessus */
    position: absolute;
    top: 60px;
    left: 0px;
}


/* on va specifier ce quil se passe lors du survol de la souris grace a :hover */
nav.menu ul li:hover > ul {
    display: block; /* permet a ce que le sous menu s'affiche en bloc quand on passe la souris dessus */
}

nav.menu ul li:hover {
    background-color: #EFAE00; /* met la couleur lors du survol */
}

hr {
    width: 100%;
    height: 2px;
    margin: 0;
    border: none;

    /* ligne de couleur degrader en violet et jaune */
    background: linear-gradient(90deg,
        purple 10%, yellow 20%, purple 30%,
yellow 40%, purple 50%, yellow 60%,
purple 70%, yellow 80%, purple 90%, yellow 100%);
}

Можете ли вы помочь мне, пожалуйста?

Answer 1

Я не проверял это, но проблема, вероятно, float:left. Подробнее о поплавках: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Существует множество различных растворов без плавающих веществ. Я думаю, что для ваших нужд это было бы лучше:

=> Заменить float: left на display: inline-flex

Это не решит все ваши проблемы, но, возможно, поставит вас на правильный путь.

Подробнее о флекс-контенте: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Post Scriptum: консиддер использует position: relative на вашем nav.menu ul ul. Это позволит вам расположить раскрывающееся подменю при наведении курсора относительно элемента li, к которому он будет прикреплен.