[英]How do i get my drop down menu items the same size as the nav bar parent?
I am trying to make a drop down menu using only CSS, but i'm having a hard time getting the dropdown menu the same size (width and height) as it's parent: 我正在尝试使用CSS创建一个下拉菜单,但是我很难让下拉菜单的大小(宽度和高度)与它的父级相同:
Working fiddle: HERE 工作小提琴: 这里
The <nav>
section from my HTML: 我的HTML中的
<nav>
部分:
<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>
The CSS: 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;
}
Any suggestions? 有什么建议么? Thanks.
谢谢。
<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>
Cheers !! 干杯!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.