Question

嘿伙计们，我试图制作一个水平下拉菜单，我已经制作了一个关于我的问题的JS小提琴，以及我想要它的图片。

我的问题是我不能让子菜单坐在我想要的地方（在容器的右侧）当我将我的子UL设置为绝对定位时，它不会比它的父级更宽，并且被迫垂直。我没有做过横向下降，只是垂直。

    <div id="head">
    <div class="container">
        <a href="#"><strong class="logo pull-left"><h1>CAVO</h1>
        </strong></a> <!-- end logo !-->
        <ul class="nav pull-right">
            <li><a href="#">Menu</a>
                <ul>
                    <li><a href="#">Starters</a></li>
                    <li><a href="#">Breakfast and Brunch</a></li>
                    <li><a href="#">Salads</a></li>
                    <li><a href="#">Sandwiches and Wraps</a></li>
                    <li><a href="#">Pasta</a></li>
                    <li><a href="#">Mains</a></li>
                    <li><a href="#">Pizza</a></li>
                </ul>
            </li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div><!-- end container !-->
</div> <!-- end header !-->

CSS

    body, html {
    height: 5000px;
    font-size: 18px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    color: #fff;
    background-color: #222;
}

a {
    text-decoration: none;
    color: inherit;
}

#head {
    height: 76px;
    width: 100%;
    background-color: #472626;
    position: fixed;
    z-index: 10000;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.container {
    max-width: 1400px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    line-height: 75px;
    text-align:left;
    -webkit-transition: font-size 2s ease , line-height 0.5s ease;
    -moz-transition: font 0.3s ease , line-height 0.5s ease;
    -o-transition: font 0.3s ease , line-height 0.5s ease;
    -ms-transition: font 0.3s ease , line-height 0.5s ease; 


}

.logo h1 {
    font-size: 2.8em;
    font: "Segoe UI Semibold";
    display:block;
}

.pull-left {
    float: left;
}

.pull-right {
    float:right;    
}

.nav {
    font-size: 1.3em;
    font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
    font-weight: 100;
}

.nav li {
    float:left;
    padding-left: 15px;
    line-height: 80px;
    -webkit-transition: line-height 0.5s ease;
    -moz-transition: line-height 0.3s ease;
    -o-transition: line-height 0.3s ease;
    -ms-transition: line-height 0.3s ease;
    position: relative;
}

.nav li a {
    opacity: 1;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;    
}

.nav li a:hover {
    opacity: .6;    
}

.nav li ul {
    background-color: #2B0909;

}

.nav li ul li a , .nav li ul li{
    display: block;
    float: left;
    line-height:none;
}

想要的结果：

Picture

这是我的小提琴：

JSFIDDLE

Answer 1

在现有的CSS中添加以下内容：

ul ul{
    position:relative;
    right:-194px;
}
ul li:first-child{
    text-align:right;
}

这是 demo 。

Answer 2

更改以下css .updated fiddle link

.nav li {
    float:left;
    padding-left: 15px;
    line-height: 80px;
    -webkit-transition: line-height 0.5s ease;
    -moz-transition: line-height 0.3s ease;
    -o-transition: line-height 0.3s ease;
    -ms-transition: line-height 0.3s ease;
    width: 95px;
}
.nav li ul {
    background-color: #2B0909;
    position: absolute;
    display: block;
    width: 100%;
    right: 0;

}
.nav li ul li a , .nav li ul li{
    display: inline-block;
    line-height: none;
    width: auto;
}

Css水平下拉定位

2 个答案: