![](/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 can I add a drop down menu to my menu bar
我正在嘗試為“我們的收藏集”創建一個下拉菜單欄,但是我的嘗試沒有用。 任何人都可以幫我一下。 下面是我的HTML和它的CSS。 我已經刪除了它的隨機試用和錯誤,並保留了.menu ul ul {display:none}
* html .clearfix { height: 1%; overflow: visible; } * + html .clearfix { min-height: 1%; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; font-size: 0; } body { margin: 0; padding: 0; } .menu { text-align: center; background-color: #222; } .menu ul { list-style: none; height: auto; padding: 40px; width: 500px; float: right; } .menu ul li { float: left; padding: 0 20px; font-size: 20px; font-family: Impact; } .menu ul ul { display: none; } .menu ul li a { color: white; text-decoration: none; transition: 350ms; } .menu ul li a:hover { color: #ed702b } .title { float: left; font-size: 40px; margin-left: -173px; margin-top: 37px; } .title a { text-decoration: none; color: white; } .center { width: 980px; margin: 0 auto; }
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link rel="stylesheet" type="text/css" href="includes/site.css"> <title>Home</title> </head> <body> <div class="menu"> <div class="center clearfix" style="height: 124px"> <h1 class="title"><a href="#">My first web</a></h1> <ul class="clearfix"> <li><a href="#">Home</a> </li> <li><a href="#">Our Collections</a> </li> <ul> <li><a href="#">First Collection</a> </li> <li><a href="#">Second Collection</a> </li> </ul> <li><a href="#">About Us</a> </li> <li><a href="#">Contact Us</a> </li> </ul> </div> </div> </body> </html>
我有很久以前做的舊菜單。
我認為您可以通過以下方式工作: 小提琴
鏈接3是下拉菜單。 看看小提琴
<div id="mainnav">
<nav>
<ul>
<li><a href="#.html">link1</a></li>
<li><a href="#.html">link2</a></li>
<li><a href="#.html">link3</a>
<ul class="sub">
<li><a href="#.html">2011</a></li>
<li><a href="#.html">2012</a></li>
<li><a href="#.html">2013</a></li>
</ul>
</li>
<li><a href="#s.html">link4</a></li>
<li class="end"><a href="#.html">link5</a></li>
</ul>
</nav>
</div>
如果您需要更多幫助,請這樣說。
我也很快為您提供了幫助。 沒什么好說的,但這是一個很好的起點,並且將原始骨架用於菜單
鏈接到小提琴:
<ul class='menu'>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Our Collections</a>
<ul>
<li><a href="#">First Collection</a></li>
<li><a href="#">Second Collection</a></li>
</ul>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
.menu{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
.menu li{
float:left;
margin-right:10px;
position:relative;
}
.menu a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
.menu a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
.menu ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
.menu ul li{
padding-top:1px;
float:none;
}
.menu ul a{
white-space:nowrap;
}
.menu li:hover ul{
left:0;
}
.menu li:hover a{
background:#008;
text-decoration:underline;
}
.menu li:hover ul a{
text-decoration:none;
}
.menu li:hover ul li a:hover{
background:#333;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.