我有这个导航代码
<div id="navigation">
<a href="/">Home</a>
<a href="index.php?sida=link2">link2</a>
<a href="index.php?sida=lin3">link3</a>
<a href="index.php?sida=link4">link4</a>
<a href="index.php?sida=link5">link5</a>
<a href="index.php?sida=link6">link6</a>
<a href="index.php?sida=link7">Link7</a>
</div>
这是导航的CSS
#navigation {
float: left;
height: 61px;
width: 885px;
background: url(../../../../images/navigation.png) no-repeat;
padding: 0 0 0 12px;
#navigation a {
font-size: 12px;
font-weight: bold;
float: left;
display: block;
height: 29px;
padding: 11px 30px 0 32px;
color: #FFF;
text-decoration: none;
margin: 10px 0 0 0;
#navigation a:hover {
background: url(../../../../images/navigation_over.png) repeat-x;
#navigation a:hover.dropdown {
background: url(../../../../images/navigation_drop.gif) repeat-x;
我一直在努力学习如何为我的导航创建下拉菜单,但没有成功。
有没有好心人帮我解决这个问题。
最佳答案
下拉演示 navigation
您好,如果您在 css
中创建了导航下拉菜单
这样做
像这样
HTML代码
<ul id="navi">
<li><a href="" class="active">LInk 1</a></li>
<li><a href="">LInk 2</a>
<ul class="subnavi">
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
</ul>
</li>
<li><a href="">LInk 3</a></li>
<div class="cl"></div>
</ul>
CSS 代码
.cl{clear:both;}
#navi{
background:#0082c8;
position:relative;
margin-top:15px;
}
#navi > li{
float:left;
margin:0 10px;
position:relative;
padding:14px 0;
}
#navi li a, .subnavi li a{
color:white;
text-decoration:none;
display:inline-block;
line-height:29px;
padding:0 13px;
font-size:16px;
font-family:arial;
text-shadow: 0px 2px 2px #034e9f;
filter: dropshadow(color=#034e9f, offx=0, offy=2);
}
#navi > li:hover > a, li:hover > a , #navi li a.active{
background:#055c9f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 3px 3px 0px #042960;
-moz-box-shadow: inset 0px 3px 3px 0px #042960;
box-shadow: inset 0px 3px 3px 0px #042960;
border:1px solid #009ada;
color:#f7cf00;
line-height:27px;
padding:0 12px;
}
.subnavi{
position:absolute;
display:none;
top:51px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #979395;
-moz-box-shadow: 0px 0px 3px 1px #979395;
box-shadow: 0px 0px 3px 1px #979395;
background:#0082c8;
border:1px solid #005890;
padding:10px 0;
white-space:nowrap;
}
#navi li:hover .subnavi{
display:block;
}
#navi .subnavi li{
margin:0;
}
#navi .subnavi li a{
display:block;
font-size:13px;
padding:0 15px;
border-radius:0;
line-height:27px;
}
#navi .subnavi li a:hover{
padding:0 15px;
border-radius:0;
border-left:0;
border-right:0;
line-height:25px;
}
关于html - 创建 CSS HTML5 下拉导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13043511/