Я пытаюсь сделать выпадающее меню, используя только CSS, но мне трудно найти раскрывающееся меню того же размера (ширина и высота), что и его родительский:
Рабочая скрипка: ЗДЕСЬ
Раздел <nav>
из моего HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu With Menus</a>
<ul>
<li><a href="#">opt 1</a></li>
<li><a href="#">opt 2</a></li>
<li><a href="#">opt 3</a></li>
</ul>
</li>
<li><a href="#">Whatnot</a></li>
</ul>
</nav>
CSS:
nav ul {
position: relative;
display: inline-table;
list-style: none;
}
nav ul li {
float:left;
list-style-type: none;
}
nav ul li a {
background-color: #dae8ec;
color: rgb(233,78,31);
display: block;
font-weight: bold;
margin: 0 auto;
padding: 9px 18px 9px;
text-decoration: none;
border: 1px solid black;
border-radius: 2px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 7px 30px;
color: rgb(233,78,31);
}
nav ul li a:hover {
background: rgb(138, 92, 132);
color:#dae8ec;
}
Какие-либо предложения? Благодарю.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu Withs</a>
<ul>
<li><a href="#">opt 1</a></li>
<li><a href="#">opt 2</a></li>
<li><a href="#">opt 3</a></li>
</ul>
</li>
<li><a href="#">Whatnot</a></li>
</ul>
</nav>
Приветствия!