[英]How can I make my horizontal navigation bar a drop down menu?
我已經嘗試過按照教程制作水平下拉導航欄,但它們從不居中,我無法弄清楚如何將它們居中。 我嘗試向相反的方向前進,然后首先將導航欄居中,然后嘗試將其設置為下拉菜單,盡管這似乎會將所有內容都丟掉。 這是我的代碼。
編輯:我遇到的問題是頁面加載時顯示子菜單,以及一個項目符號點,我確信可以通過將列表樣式設置為無來修復,但是我不知道在哪里這應該是CSS。
我試圖創建一個類似於菜單此 。 我明白這使用joomla而我不是。
#header { height: 100px; margin-left: auto; margin-right: auto; text-align: center; } #content { max-width: 700px; margin-left: auto; margin-right: auto; padding: 20px; } #footer { height: 85px; padding-top: 40px; margin-left: auto; margin-right: auto; text-align: center; } #menu { margin: 0 auto; display: inline-block; list-style: none; padding: 0; border-top: 1 solid #ccc; border-left: 1 solid #ccc; border-bottom: 1 solid #ccc; } #menu li { float: left; } #menu li a { display: block; padding: 10px 10px; text-decoration: none; font-weight: bold; } #menu li a:hover { color: #c00; }
<ul id="menu"> <li><a href="#">Home</a> </li> <li><a href="#">Kandi</a> <ul> <li><a href="#">Claim Kandi</a> </li> </li> <li><a href="#">Events</a> </li> <li><a href="#">Artists</a> </li> <li><a href="#">Community</a> </li> <li><a href="#">Merchandise</a> </li> </ul>
添加此CSS:
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
用這個css
#menu{
position:absolute;
top:150px;
left:8%;
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
line-height:30px;
}
#menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
#menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
#menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
#menu ul li:hover ul{
visibility:visible;
z-index:1;
}
#menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
#menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}
用這個HTML代碼
<div id="menu">
<ul>
<li><a href="#">Home</a></li></ul>
<ul>
<li><a href="#">Video</a> <!--This is in main menu-->
<ul>
<li><a href="#">Technology</a></li> <!--This is in drop downmenu-->
<li><a href="#">Tutorial</a></li> <!--This is in drop downmenu-->
</ul>
</li>
</ul>
您可以使用某些菜單構建器中的CSS ,例如帶有js的css菜單構建器 ,但是您只能使用生成的菜單代碼源中的css。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.