Question

我有导航的代码

        <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;

}

我一直在尝试学习如何为导航创建下拉菜单，但没有成功。

是否有人善于帮助我。

Answer 1

我用这个css创建了下拉菜单:(足够老了，我随处可用）

.vmenu {
list-style:none;
height:75%;
min-height:24px;
width:16.67%;
max-width:544px;
min-width:90px;
text-align:center;
float:left;
z-index:1;
}
.vmenu > li {
width:100%;
list-style:none;
}
.vmenu > a {
background-color:#FFAF00;
width:100%;
height:100%;
display:block;
cursor:pointer;
}
.vmenu li > a {
background-color:#FF9F00;
display:block;
cursor:pointer;
}
.vmenu > li {
display:none;
}
.vmenu:hover > li {
display:block;
}
.vmenu > a:focus~li {
display:block;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > $li > a:focus {
display:block;
}
*/
.vmenu li > a:hover {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu li > a:focus {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu > a:hover {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > a:focus {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu {
width:100%;
display:none;
}
.vmenu:hover > li > ul.vmenu {
display:block;
}
.vmenu > a:focus~li > ul.vmenu {
display:block;
}
.vmenu > li > ul.vmenu > li {
display:none;
padding:0px 0px 0px 100%;
}
.vmenu li ul.vmenu > a {
background-color:#FFAF0F;
float:left;
}
.vmenu li ul.vmenu:hover > a {
background-color:#258072;
color:#DDDDDD;
}
.vmenu li ul.vmenu > a:focus {
background-color:#258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu:hover > li {
top:0;
display:block;
cursor:pointer;
}
.vmenu > li > ul.vmenu > a:focus~li {
top:0;
display:block;
cursor:pointer;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > li > ul.vmenu > $li > a:focus {
top:0;
display:block;
cursor:pointer;
}

具有完全嵌套的子菜单，并且部分支持键盘导航。见：css中的评论

示例html：

<!DOCTYPE html>
<html>
    <head>
        <style>
* {
border-spacing:0px;
border:none;
height:inherit;
width:inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-repeat:no-repeat;
background-position:center;
}
body {
width:90%;
max-width:1600px;
min-width:800px;
margin:auto;
}
body > div {
width:100%;
}
.vmenu {
list-style:none;
height:75%;
min-height:24px;
width:16.67%;
max-width:544px;
min-width:90px;
text-align:center;
float:left;
z-index:1;
}
.vmenu > li {
width:100%;
list-style:none;
}
.vmenu > a {
background-color:#FFAF00;
width:100%;
height:100%;
display:block;
cursor:pointer;
}
.vmenu li > a {
background-color:#FF9F00;
display:block;
cursor:pointer;
}
.vmenu > li {
display:none;
}
.vmenu:hover > li {
display:block;
}
.vmenu > a:focus~li {
display:block;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > $li > a:focus {
display:block;
}
*/
.vmenu li > a:hover {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu li > a:focus {
background-color: #2580FF;
color:#DDDDDD;
}
.vmenu > a:hover {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > a:focus {
background-color: #258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu {
width:100%;
display:none;
}
.vmenu:hover > li > ul.vmenu {
display:block;
}
.vmenu > a:focus~li > ul.vmenu {
display:block;
}
.vmenu > li > ul.vmenu > li {
display:none;
padding:0px 0px 0px 100%;
}
.vmenu li ul.vmenu > a {
background-color:#FFAF0F;
float:left;
}
.vmenu li ul.vmenu:hover > a {
background-color:#258072;
color:#DDDDDD;
}
.vmenu li ul.vmenu > a:focus {
background-color:#258072;
color:#DDDDDD;
}
.vmenu > li > ul.vmenu:hover > li {
top:0;
display:block;
cursor:pointer;
}
.vmenu > li > ul.vmenu > a:focus~li {
top:0;
display:block;
cursor:pointer;
}
/* with CSS4 which is not yes supported by any browser
it has to be handled with javascript somehow
selects the li instead of a:focus to let the tab go through
.vmenu > li > ul.vmenu > $li > a:focus {
top:0;
display:block;
cursor:pointer;
}
*/
        </style>
    </head>
    <body>
        <div>
            <ul class="vmenu"><a href="">Menu1</a>
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>
                <li><a href="">Item3</a></li>
                <li><a href="">Item4</a></li>
                <li><a href="">Item5</a></li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu1</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                    </ul>
                </li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu2</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                        <li>
                            <ul class="vmenu"><a href="">SubMenu1</a>
                                <li><a href="">Item1</a></li>
                                <li><a href="">Item2</a></li>
                                <li><a href="">Item3</a></li>
                                <li><a href="">Item4</a></li>
                                <li><a href="">Item5</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="vmenu"><a href="">Menu2</a>
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>
                <li><a href="">Item3</a></li>
                <li><a href="">Item4</a></li>
                <li><a href="">Item5</a></li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu1</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                    </ul>
                </li>
                <li>
                    <ul class="vmenu"><a href="">SubMenu2</a>
                        <li><a href="">Item1</a></li>
                        <li><a href="">Item2</a></li>
                        <li><a href="">Item3</a></li>
                        <li><a href="">Item4</a></li>
                        <li><a href="">Item5</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

...需要你在z-index和颜色上做一些工作才能让它看起来更好。

Answer 2

演示下拉 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;
}

的 [Live demo][2]*的 *

创建CSS HTML5下拉导航

2 个答案: