![](/img/trans.png)
[英]How can I repeat the underline CSS for my nav bar text for my drop down menu text and centre drop down menu text?
[英]How do i get my drop down menu items the same size as the nav bar parent?
我正在嘗試使用CSS創建一個下拉菜單,但是我很難讓下拉菜單的大小(寬度和高度)與它的父級相同:
工作小提琴: 這里
我的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>
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>
干杯!!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.