Question

我在这里发帖以获得一些帮助。

我试图制作一个简单的下拉菜单，并且我已经与子菜单（limpieza和balance）堆叠在一起。

我试图在这里实现的是使limpieza和balance按钮具有相同的宽度，并且文本与其余按钮对齐。我只是不知道如何。看起来，一旦将相对属性添加到容器中并将绝对属性添加到limpieza和balance，我就无法再控制它们的宽度或文本对齐。我想是不是他们的硬币。我真的很困惑，因为这是我第一次尝试使用css。

如果某些人可以提供一些帮助，我将不胜感激。

这是代码。

＆＃13;

@charset "utf-8";
/* CSS Document */
*{
    margin: 0px;
    padding: 0px;
}

body {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;	
	}

/*ESTILOS GENERALES*/

.header {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    background:white;
    }

.barrasup {
	background:#203c6e;
	padding-top: 10px;
	padding-bottom: 10px;
	min-height: 29px;
    z-index: 2;
}

.contenedor {
	margin: 0 auto;
	max-width: 1200px;
  }

.social {
	background: #203c6e;
	display: block;
	float: none;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	width: 75px;
}

.instasocsup {
	margin-right: 10px
}

/*MENU*/

.barrainf {
    margin-top: 10px;
}

.menu {
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.menu ul {
	list-style:none;
	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;
    }

＆＃13;

<!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>
	<div class="header">
		<div class="barrasup">
			<div class="contenedor">
				<div class="social">
				<a href="#" class="instasocsup"><img src="Instagram_logo.png"></img></a>
				<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>
		</div>	
      </div>
</body>
</html>

＆＃13;

Answer 1

只需将compute css用于与继承的表显示属性一起使用的宽度。在此处查看http://codepen.io/anon/pen/reMpRj

.menu > ul > li > div > ul {
  width: calc(100% - 10px);
}

在css下拉菜单中控制子菜单宽度

1 个答案: