Я пытаюсь создать веб-сайт, но у меня странная проблема с моим подменю на панели навигации, как вы можете видеть на этом рисунке:
проблема подменю
Я хочу, чтобы мои элементы подменю имели одинаковый размер, поэтому я имею в виду одинаковую высоту.
Это моя 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();
});
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я не вижу весь ваш код, но вы можете попробовать что-то вроде этого, чтобы поиграть со своими li или ul
header nav ul {
position: absolute;
top: 10%;
}
Или же
header nav ul li {
position: absolute;
top: 10%;
}
Можете ли вы опубликовать весь код страницы с помощью CSS и JS? пожалуйста!
Слишком долго для комментария!
Тогда отредактируйте свой вопрос!
Хорошо сделал это! Буду очень признателен, если вы исправите!
Тем не менее, мне нужно увидеть ваш HTML, а вы JS ?, вы редактировали только CSS .. Я постараюсь вам помочь ?!
HTML - это все, что у меня есть в соответствии с навигационной панелью. Щас поставлю js
Я ответил вы проверьте мой ответ
Вы просто забываете закрыть ">" правильный код:
<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>
Пожалуйста, прочтите При каких обстоятельствах я могу добавить к своему вопросу «срочно» или другие похожие фразы, чтобы получить более быстрые ответы? - вкратце, это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивно для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.