-
Conteúdo Similar
-
Por FabianoSouza
Galera, por padrão, cada LI que se cria (via jscript), vai parar na parte inferior da UL, né?
Há uma maneira de fazer a LI criada pela minha function ir para o topo da lista dentro da UL?
-
Por s3c0
Olá pessoal,
boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho?
<div class="navPages-container" > <div class="container"> <nav class="navPages" style="text-align:left;"> <ul class="navPages-list"> <li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a> <div id="menu2"> <ul class="parent-menu"> <li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a> <div class="categoria"> <ul> <li><a href="#11">item1</a></li> <li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li> <li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a> <div class="subcategoria"> <ul > <li><a href="#111">item</a></li> <li><a href="#112">Even more</a></li> <li><a href="#113">item</a></li> <li><a href="#114">item</a></li> <li><a href="#115">item</a></li> </ul> </div> </li> <li><a href="#14">item4</a></li> <li><a href="#15">item5</a></li> <li><a href="#16">item6</a></li> </ul> </div> </li> #menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;} .parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;} .parent-menu li:hover{background:#ccc;cursor:pointer;} .categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}} .categoria ul li:hover{background:#ccc;cursor:pointer;} .categoria ul{list-style-type:none;width:270px;} .categoria ul li{list-style-type:none;width:270px;} .subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}} .subcategoria ul{list-style-type:none;width:270px;} .subcategoria ul li{list-style-type:none;width:270px;} .subcategoria ul li:hover{background:#ccc;cursor:pointer;} .navPages-item:hover #menu2{display:block;} .parent-menu li:hover .categoria{display:block;} .categoria ul li:hover .subcategoria{display:block;} #menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; } #menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }
-
Por FabianoSouza
Tenho essa lista
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
Preciso que ele fique assim:
1 2
3 4
5
Como faço um CSS para isso?
Obrigado.
-
Por Bruno Goedert Dalmolin
Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes:
do HTML:
<header>
<ul id="Menu">
<li><a href="SmartAce-Home.html">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Contato</a></li>
</ul>
</header>
do CSS:
@charset "UTF-8";
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #112c38;
}
ul#Menu {
text-align: center;
margin: 0;
padding: 0;
display: flex;
top: -10;
}
ul#Menu li{
list-style: none;
margin: 0 20px;
transition: 0.5s;
}
ul#Menu li a{
position: relative;
text-decoration: none;
padding: 5px;
font-size: 18px;
font-family: sans-serif;
color: #fff;
text-transform: uppercase;
transition: 0.5s;
}
ul#Menu:hover li a {
transform: scale(1.4);
opacity: .2;
filter: blur(5px);
}
ul#Menu li a:hover {
transform: scale(2);
opacity: 1;
filter: blur(0);
}
ul#Menu li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ff497c;
transition: transform 0.5s;
transform-origin: right;
transform: scaleX(0);
z-index: -1;
}
ul#Menu li a:hover:before {
transition: transform 0.5s;
transform-origin: left;
transform: scaleX(1);
}
-
Por joaon77@yahoo.com.br
Olá pessoal!
Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
Agradeço muito se alguém puder me ajudar.
-
POWERED BY:
Oi
Não estou conseguindo desfixar o menu dessa template de menu chamada Animated Border Menu
Preciso que o menu não fique fixo na tela e que continue abrindo e fechando com o JS
https://codepen.io/Y--p--Y/pen/GfIrm
Esse é o código
Quando altero o css pra tirar a ''position: fixed" essas três barras somem simplesmente e não entendo porque.
Alguém sabe me dizer como fazer isso?
https://codepen.io/Y--p--Y/pen/GfIrm
Compartilhar este post
Link para o post
Compartilhar em outros sites