0
Я отправляю здесь, чтобы получить помощь.Ширина подменю управления в раскрывающемся меню css
Я пытаюсь создать простую выпадающее меню, и меня укладывают в подменю (limpieza и balance).
То, что я пытаюсь достичь здесь, состоит в том, чтобы кнопки limpieza и balance имели ту же ширину и текст, что и остальные кнопки. Я просто не знаю, как это сделать. Похоже, как только относительный атрибут добавляется в контейнер, и абсолютный атрибут добавляется к limpieza и балансу, я больше не могу контролировать их ширину или выравнивание текста. Наверное, это bc, они вышли из своего cointainer. Я действительно смущен, потому что это первый раз, когда я пытаюсь использовать css.
Буду признателен, если some1 может оказать вам помощь.
Вот код.
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
body {
\t font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; \t
\t }
/*ESTILOS GENERALES*/
.header {
left: 0;
position: fixed;
top: 0;
width: 100%;
background:white;
}
.barrasup {
\t background:#203c6e;
\t padding-top: 10px;
\t padding-bottom: 10px;
\t min-height: 29px;
z-index: 2;
}
.contenedor {
\t margin: 0 auto;
\t max-width: 1200px;
}
.social {
\t background: #203c6e;
\t display: block;
\t float: none;
\t margin-bottom: 5px;
\t margin-left: auto;
\t margin-right: auto;
\t width: 75px;
}
.instasocsup {
\t margin-right: 10px
}
/*MENU*/
.barrainf {
margin-top: 10px;
}
.menu {
width: 1180px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
\t list-style:none;
\t padding: 0;
}
.menu li {
line-height: 2.5rem;
position: relative;
}
.menu li .item2 ul {
position: absolute;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > ul > li >div > a {
text-decoration:none;
color: white;
display: block;
}
.menu li ul {
display: none;
}
.menu li:hover ul {
display:block;
}
.item1 {
margin-left: 10px;
margin-right: 10px;
background: white;
}
.item2, .item3, .item4, .item5 {
margin-left: 0px;
margin-right: 10px;
background:white;
}
.subitem1, .subitem2 {
margin-left: 0px;
background: #203C6E;
color: white;
}
/*1ER NIVEL*/
.menu > ul{
background: #DF2529;
display: table;
width:100%;
}
.menu > ul > li {
float: left;
width: 20%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/styleIndigo.css" type="text/css" rel="stylesheet">
</head>
<body>
\t <div class="header">
\t \t <div class="barrasup">
\t \t \t <div class="contenedor">
\t \t \t \t <div class="social">
\t \t \t \t <a href="#" class="instasocsup"><img src="Instagram_logo.png"></img></a>
\t \t \t \t <a href="#"><img src="twitter_logo.png"></img></a>
</div>
</div>
</div>
<div class="barrainf">
<div class="menu">
<ul>
<li><div class="item1"><a href="#">Inicio</a></div></li>
<li><div class="item2"><a href="#">Comprar</a>
<ul>
<li id="listamenu"><div class="subitem1"><a href="#">Balance</a></div></li>
<li id="listamenu"><div class="subitem2"><a href="#">Limpieza</a></div></li>
</ul>
</div></li>
<li><div class="item3"><a href="#">Blog</a></div></li>
<li><div class="item4"><a href="#">Quienes somos</a></div></li>
<li><div class="item5"><a href="#">Contacto</a></div></li>
</ul>
</div>
\t \t </div> \t
</div>
</body>
</html>
Ничего себе, спасибо. Это именно то, что я искал. Я ценю это! – CamiloLasso