Css-导航菜单<;Ul>;-子菜单
我目前正在开发一个网站,我正在尝试更多的css编码,我已经完成了导航的基本css。虽然我现在想做的是制作子菜单,所以当你滚动其中一个按钮时,菜单就会出现 以下是我当前的Css: HTML代码:Css-导航菜单<;Ul>;-子菜单,css,menu,navigation,html-lists,nav,Css,Menu,Navigation,Html Lists,Nav,我目前正在开发一个网站,我正在尝试更多的css编码,我已经完成了导航的基本css。虽然我现在想做的是制作子菜单,所以当你滚动其中一个按钮时,菜单就会出现 以下是我当前的Css: HTML代码: /*Naviagtion Bar Css */ ul { margin: 0; padding: 0; list-style:none; } li { padding-top:5px; color: #FFF; width:120px; float: left; margin: 0
/*Naviagtion Bar Css */
ul {
margin: 0;
padding: 0;
list-style:none;
}
li {
padding-top:5px;
color: #FFF;
width:120px;
float: left;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 120px;
height: 30px;
padding-top:20px;
}
#homepage a {
background-image: url(../images/Button_NavBar_Unselected.png);
background-repeat: no-repeat;
}
#homepage_current a {
background-image: url(../images/Button_NavBar_CurrentPage.png);
background-repeat: no-repeat;
}
#homepage a:hover {
background-image: url(../images/Button_NavBar_Hover.png);
background-repeat: no-repeat;
}
#guide a {
background-image: url(../images/Button_NavBar_Unselected.png);
background-repeat: no-repeat;
}
#guide_current a {
background-image: url(../images/Button_NavBar_CurrentPage.png);
background-repeat: no-repeat;
}
#guide a:hover {
background-image: url(../images/Button_NavBar_Hover.png);
background-repeat: no-repeat;
}
#blog a {
background-image: url(../images/Button_NavBar_Unselected.png);
background-repeat: no-repeat;
}
#blog_current a {
background-image: url(../images/Button_NavBar_CurrentPage.png);
background-repeat: no-repeat;
}
#blog a:hover {
background-image: url(../images/Button_NavBar_Hover.png);
background-repeat: no-repeat;
}
#media a {
background-image: url(../images/Button_NavBar_Unselected.png);
background-repeat: no-repeat;
}
#media_current a {
background-image: url(../images/Button_NavBar_CurrentPage.png);
background-repeat: no-repeat;
}
#media a:hover {
background-image: url(../images/Button_NavBar_Hover.png);
background-repeat: no-repeat;
}
#forum a {
background-image: url(../images/Button_NavBar_Unselected.png);
background-repeat: no-repeat;
}
#forum_current a {
background-image: url(../images/Button_NavBar_CurrentPage.png);
background-repeat: no-repeat;
}
#forum a:hover {
background-image: url(../images/Button_NavBar_Hover.png);
background-repeat: no-repeat;
}
#navbar {
position:relative;
top:5px;
float:left;
margin-top:30px;
margin-left:45px;
width:600px;
height: 50px;
z-index:-1;
}
Html代码:
<div id="navbar" style="display: inline-block;">
<ul>
<li id="homepage_current"><a><strong>Home</strong></a></li>
<li id="guide"><a><strong>Guide</strong></a>
<ul>
<li> Sub Menu 1 </li>
<li> Sub Menu 2 </li>
<li> Sub Menu 3 </li>
</ul>
</li>
<li id="blog"><a><strong>Blog</strong></a></li>
<li id="media"><a><strong>Media</strong></a></li>
<li id="forum"><a><strong>Forums</strong></a></li>
</ul>
</div>
- 到页面。方法是,首先,必须像这样设置父元素相对值
#navbar>ul>li{position:relative;}
然后将子元素设置为在父元素下(并使其隐藏)(20 px是任意的)
然后使子菜单在悬停时可见
#navbar>ul>li:hover>ul{display:block;}
另外,我建议您将li的当前样式更改为#navbar>ul>li,因为li css也会影响所有子菜单
请注意>操作符,很多旧的导航器IE6和IE5都不支持它,如果这很重要,请使用:
<li id="guide" class="lvl1"><a><strong>Guide</strong></a>
只要你没有任何具体的问题,我建议你在五月份的教程中选一本。例如,最著名的可能是:!这是一个完美的开始。
或者也可以帮助你
最后,这里是一个关于如何创建一个好的应用程序的教程
此外,在Stackoverflow上,CSS下拉菜单已经讨论过多次。欢迎使用Stackoverflow。页面的链接在哪里?我不能在互联网上真正使用普通类型的教程,因为它需要包含背景图像。@肖恩,没关系,机制完全相同。尝试一下这些链接教程,如果你在某个时候遇到困难,问一个关于这个问题的具体问题,我相信会有很多人愿意帮助你。你的问题越清楚,你得到的好答案就越多。
<li id="guide" class="lvl1"><a><strong>Guide</strong></a>
li.lvl1{...