Question

我正在尝试创建一个下拉导航栏，这就是我所拥有的。

HTML

<div class="navBar">
    <ul class="navBarStyles navBarWidth navBarMain"> 
        <li class="onSelect"><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>

        <ul class="navBarExtended">
            <li class="borderLeft"><a href="#">ExtraItem</a></li>
        </ul>
        <ul class="navBarExtra" id="floatRight">
            <li class="i-icon">Dropdown</li>
                <ul class="dropdown">
                    <li><a href="#">SubItem1</a><li>
                    <li><a href="#">SubItem2</a><li>
                    <li><a href="#">SubItem3</a><li>
                </ul>
        </ul>
    </ul>

</div>

CSS

    a{
    text-decoration: none;
}
.header {
    width: 100%;
    background-color: #000000;
    }
.headerContent{
    width: 960px;
    margin: 0 auto;
}

.navBar{
    font-family: "opensans-regular";
    width: 100%;
    position: absolute;
    line-height: 48px;
    background-color: #0088FF; /*0088FF*/
    color: #ffffff; 
}
.navBarWidth{
    width: 400px;
    margin: 0 auto;
}
.navBarStyles li{
    float: left;
    }
.navBarStyles li a{
    display: inline-block;
    color: #FFFFFF;
    font-size: .9em;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: top;
    letter-spacing: 0;
    text-decoration: none;
}
.navBarMain li a:hover{
    background-color: #40A5FF; /*#005569 #3D3C3C  12B0CC*/
    text-shadow: none;
    /* Firefox */
    -moz-transition-property: background-color;
    -moz-transition-duration: .30s;
    -moz-transition-timing-function: ease-out;
    -moz-transition-delay: 0s;
    /* WebKit */
    -webkit-transition-property: background-color;
    -webkit-transition-duration: .30s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: 0s;
    /* Opera */
    -o-transition-property: background-color;
    -o-transition-duration: .30s;
    -o-transition-timing-function: ease-out;
    -o-transition-delay: 0s;
    /* Standard */
    transition-property: background-color;
    transition-duration: .30s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}

.navBarExtended li a:hover{
    text-decoration: underline;
    background: none;
}


/*Class applied to current page element */
.onSelect{
    background-color: #40A5FF;
}

/*Navigation Bar Extra - Sytles*/
.navBarExtra li{
    float: right;
    opacity: .88;
}
.navBarExtra li:hover{
    opacity: 1;
    background: none;
    cursor: pointer;
    -moz-transition-property: opacity;
    -moz-transition-duration: .30s;
    -moz-transition-timing-function: ease-out;
    -moz-transition-delay: 0s;
}

.dropdown{
    font-family: 'opensans-regular';
    font-size: .95em;
}

.navBarExtra ul li{
    visibility: hidden;
    float: left;
    min-width: 150px;
    position: absolute;
    margin-top: 50px;
    left: 0;
    z-index: 999;
}
.navBarExtra ul li:hover > ul,
.navBarExtra ul li ul:hover{
    visibility: hidden;
}

jsFiddle

但无法在下拉按钮下显示子项。当用户将鼠标悬停在dropdown按钮上时，如何定位下拉按钮以显示这些按钮？

Answer 1

说实话，在您的示例中涉及所有复杂的类名称和样式，很难找出需要修复的内容。我把一个简单的例子放在一起，你可以根据自己的喜好进行编辑。应该是非常自我解释的。

请参阅小提琴：http://jsfiddle.net/5Uejn/23/

HTML

<ul class="navbar">
    <li><a href="#">page 1</a></li>
    <li><a href="#">page 2</a></li>
    <li>title 1
        <ul>
            <li><a href="#">page 3</a></li>
            <li><a href="#">page 4</a></li>
            <li><a href="#">page 5</a></li>
        </ul>
    </li>
    <li>title 2
        <ul>
            <li><a href="#">page 6</a></li>
            <li><a href="#">page 7</a></li>
        </ul>
    </li>
</ul>

CSS

.navbar, .navbar ul 
{                                               
    font-size:20px;
    list-style:none;
    z-index:10;
    margin:0;
    padding:0;
}

.navbar a, .navbar a:link
{               
    color:black;
    text-decoration:none;
}

.navbar li          
{       
    float:left; 
    background: #666;
    width:100px;
}

.navbar li:hover, .navbar a:hover
{
    background:#aaa;  
    color:blue
}

.navbar li ul       
{   
    display:none;
}

.navbar li:hover ul
{   
    position:absolute;
    display:block;
    width:100px;
}

.navbar li ul li 
{   
    float:none;

}

悬停时的CSS下拉列表

1 个答案: