Размер подменю на панели навигации с использованием HTML и CSS

Я пытаюсь создать веб-сайт, но у меня странная проблема с моим подменю на панели навигации, как вы можете видеть на этом рисунке:

проблема подменю

Размер подменю на панели навигации с использованием HTML и CSS

Я хочу, чтобы мои элементы подменю имели одинаковый размер, поэтому я имею в виду одинаковую высоту.

Это моя HTML-часть:

<header>
            <div class = "menu_bar">
                <a href = "#" class = "bt-menu"><span class = "icon-menu"></span>Menu</a>
            </div>

            <div class = "logo">
                <img src = "logo.png"> 
            </div>

            <div class = "box">
                <form>
                    <input type = "text" name = "" placeholder = "Type...">
                    <input type = "submit" name = "" value = "Search">            
                </form>
            </div> 

            <nav>
                <ul>
                    <li><a href = "#"><span class = "icon-home"></span>Acceuil</a></li>
                    <li><a href = "#"><span class = "icon-briefcase"></span>Cities</a></li>
                    <li class = "tete">
                        <a href = "#"><span class = "icon-rocket"></span>Activites<span class = "flash icon-circle-down"</a>
                        <ul class = "sousmenu">
                            <li><a href = "#">Venice</a></li>
                            <li><a href = "#">Rome</a></li>
                            <li><a href = "#">Pisa</a></li> 
                        </ul>
                    </li>
                    <li><a href = "#"><span class = "icon-earth"></span>Services</a></li>
                    <li><a href = "#"><span class = "icon-envelop"></span>Contacter</a></li>
                </ul>
            </nav>
        </header>

А это CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;}



body {
    line-height: 1;
    overflow-x:hidden;}

ol, ul {
    list-style: none;}

blockquote, q {
    quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;}


.menu_bar {
    display:none;}

header {
    width: 100%;}

header nav {
    background:rgba(255, 0, 0, 0.2);
    z-index:1000;
    max-width: 1400px;
    width:100%;
    margin-top: 0px; }

header nav ul {
    list-style:none;
    margin-left: 220px;}


.logo{
    float: left;
    padding-top:8px;
    padding-left: 20px;
    cursor: pointer;}


.box{
    position: absolute;
    top: 4.5%;
    left: 95%;
    width: 700px;
    transform: translate(-50%, -50%);   }

input{
    position:relative;
    display: inline-block;
    font-size: 20px;
    box-sizing: border-box;
    transition: 0.5s}

input[type = "text"]
{
    background: #fff;
    opacity:0.2;
    width: 270px;
    height: 30px;
    border: none;
    outline: none;
    padding: 0 25px;
    border-radius: 25px 0 0 25px;   }


input[type = "submit"]
{
    position: relative;
    border-radius: 0px 25px 25px 0; 
    width: 120px;
    height: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    background: #ffc107;
    opacity: 0.8;
}

input[type = "submit"]:hover
{
    background: #ff5722;} 

header nav ul li {
    display:inline-block;
    position: relative;}

header nav ul li:hover {
    background:red;}

header nav ul li a {
    color:#fff;
    display:block;
    text-decoration:none;
    padding: 20px;}

header nav ul li a span {
    margin-right:10px;}

header nav ul li:hover .sousmenu {
    display:block;}

header nav ul li .sousmenu {
    display: none;
    background:rgba(255, 0, 0, 0.2); 
    margin-left: 0px; 
    margin-top: 0px; 
    position: absolute;
    width: 150%;
    z-index:1000;}

header nav ul li .sousmenu li {
    padding: 0px;
    display:block;
    overflow: hidden; 
    border-bottom: 1px solid rgba(255,255,255,.5); }

header nav ul li .sousmenu li a {
    padding: 10px; 
    display: block;}

/*header nav ul li .sousmenu li a span {
    float: right;
    position: relative;
    top:3px;
    margin-right:0;
    margin-left:10px;
}*/

header nav ul li .flash {
    position: relative;
    top:1px;
    margin-left:10px;
    margin-right:0px;}

@media screen and (max-width: 800px) {
    body {
        padding-top:80px;
    }

    .menu_bar {
        display:block;
        width:100%;
        position: fixed;
        top:0;
        background:#E6344A;
    }

    .menu_bar .bt-menu {
        display: block;
        padding: 20px;
        color: #fff;
        overflow: hidden;
        font-size: 25px;
        font-weight: bold;
        text-decoration: none;
    }

    .menu_bar span {
        float: right;
        font-size: 40px;
    }

    header nav {
        width: 80%;
        height: calc(100% - 80px);
        position: fixed;
        right:100%;
        margin: 0;
        overflow: scroll;
    }

    header nav ul{
        margin-left: 0px;
    }


    header nav ul li {
        display: block;
        border-bottom:1px solid rgba(255,255,255,.5);
    }

    header nav ul li a {
        display: block;
    }

    sheader nav ul li:hover .sousmenu {

        display: none;
    }

    header nav ul li .sousmenu {
        width: 100%;
        padding-top: 0px;
        position: relative;
    }

    header nav ul li .sousmenu li a {
        margin-left:20px;
    }

    header nav ul li .flash {
        float: right;
    }

    .logo 
    {
        display: none;
    }

    .box input
    {
        display: none;  
    }
}

Это часть JS:

$(document).ready(main);
var contador = 1;
function main(){
    $('.menu_bar').click(function(){
        // $('nav').toggle(); 

        if (contador == 1){
            $('nav').animate({
                left: '0'
            });
            contador = 0;
        } else {
            contador = 1;
            $('nav').animate({
                left: '-100%'
            });
        }

    });

    // Mostramos y ocultamos submenus
    $('.tete').click(function(){
        $(this).children('.sousmenu').slideToggle();
    });
}

Пожалуйста, прочтите При каких обстоятельствах я могу добавить к своему вопросу «срочно» или другие похожие фразы, чтобы получить более быстрые ответы? - вкратце, это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивно для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.

halfer 04.05.2018 19:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
52
2

Ответы 2

Я не вижу весь ваш код, но вы можете попробовать что-то вроде этого, чтобы поиграть со своими li или ul

header nav ul {
 position: absolute;
 top: 10%;
}

Или же

header nav ul li {
 position: absolute;
 top: 10%;
}

Можете ли вы опубликовать весь код страницы с помощью CSS и JS? пожалуйста!

MohcinBN 04.05.2018 17:43

Слишком долго для комментария!

Claire 04.05.2018 17:47

Тогда отредактируйте свой вопрос!

MohcinBN 04.05.2018 17:48

Хорошо сделал это! Буду очень признателен, если вы исправите!

Claire 04.05.2018 17:58

Тем не менее, мне нужно увидеть ваш HTML, а вы JS ?, вы редактировали только CSS .. Я постараюсь вам помочь ?!

MohcinBN 04.05.2018 18:02

HTML - это все, что у меня есть в соответствии с навигационной панелью. Щас поставлю js

Claire 04.05.2018 18:07

Я ответил вы проверьте мой ответ

MohcinBN 04.05.2018 18:20

Вы просто забываете закрыть ">" правильный код:

  <header>
        <div class = "menu_bar">
            <a href = "#" class = "bt-menu"><span class = "icon-menu"></span>Menu</a>
        </div>

        <div class = "logo">
            <img src = "logo.png"> 
        </div>

        <div class = "box">
            <form>
                <input type = "text" name = "" placeholder = "Type...">
                <input type = "submit" name = "" value = "Search">            
            </form>
        </div> 

        <nav>
            <ul>
                <li><a href = "#"><span class = "icon-home"></span>Acceuil</a></li>
                <li><a href = "#"><span class = "icon-briefcase"></span>Cities</a></li>
                <li class = "tete">
       <a href = "#"><span class = "icon-rocket"></span>Activites<span class = "flash icon-circle-down"></span></a>
                    <ul class = "sousmenu">
                        <li><a href = "#">Venice</a></li>
                        <li><a href = "#">Rome</a></li>
                        <li><a href = "#">Pisa</a></li> 
                    </ul>
                </li>
                <li><a href = "#"><span class = "icon-earth"></span>Services</a></li>
                <li><a href = "#"><span class = "icon-envelop"></span>Contacter</a></li>
            </ul>
        </nav>
    </header>

Другие вопросы по теме