导航栏中的子菜单大小使用HTML和CSS

Question

我正在尝试创建一个网站，但我在导航栏中的子菜单遇到了一个奇怪的问题，如下图所示：

子菜单问题

我想要的是我的子菜单元素具有相同的大小，所以我的意思是相同的高度。

这是我的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();
    });
}

Answer 1

我没有看到你的所有代码，但你可以尝试这样的东西来玩你的li或ul

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

或

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

Answer 2

你忘记关闭＆＃34;＆gt;＆＃34;正确的代码：

  <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>