CSS下拉菜单仅在左侧扩展

时间：2014-02-09 19:12:14

标签： html css drop-down-menu css-position

我的问题是我希望有一个菜单可以通过幻灯片展开幻灯片，但现在它只在一个地方展开而不是在我徘徊的那个菜单项下... 

<div class="container">
    <a class="toggleMenu" href="#">Menu</a>
    <ul class="nav">
        <li><a href="#" id="HyperLinkLabelEditor" runat="server"><span >
            <asp:Label  ID="LabelEditor" runat="server" Text="Stammdaten" />
        </span></a>
            <ul>
                <li>
                    <asp:HyperLink ID="HyperLinkIngredients" runat="server" Text="Zutaten" NavigateUrl="#" /></li>
                <li>
                    <asp:HyperLink ID="HyperLinkUnits" runat="server" Text="Einheiten" NavigateUrl="#" /></li>
                <li>
                    <asp:HyperLink ID="HyperLinkEditAttribute" runat="server" Text="Attribute" NavigateUrl="#" /></li>
                <li>
                    <asp:HyperLink ID="HyperLinkUsers" runat="server" Text="Benutzer" NavigateUrl="#" />
                    <ul>
                        <li>
                            <asp:HyperLink ID="HyperLinkRolls" runat="server" Text="Rollen" NavigateUrl="#" /></li>
                        <li>
                            <asp:HyperLink ID="HyperLinkUser" runat="server" Text="Benutzer" NavigateUrl="#" /></li>
                    </ul>
                </li>
                <li>
                    <asp:HyperLink ID="HyperWorkflowCoredata" runat="server" Text="Workflow" NavigateUrl="#" />
                </li>
            </ul>
        </li>
        <li><a href="#" id="HyperLinkLabelCustomersAndProjects" runat="server"><span >
            <asp:Label  ID="LabelCustomersAndProjects" runat="server" Text="Kunden" />
        </span></a>
            <ul class="submenu sdt_box">
                <li>
                    <asp:HyperLink ID="HyperLinkNewCustomer" runat="server" Text="Neuer Kunde" NavigateUrl="#" />
                </li>
                <li>
                    <asp:HyperLink ID="HyperLinkContracts" runat="server" Text="Verträge" NavigateUrl="#" />
                </li>
                <li>
                    <asp:HyperLink ID="HyperLinkPublishing" runat="server" Text="Ausleiten" NavigateUrl="#" />
                </li>
            </ul>
        </li>
        <li><a href="#" id="HyperLinkLabelLinkWorkflow" runat="server"><span >
            <asp:Label CssClass="LabelLinkWorkflow" ID="LabelLinkWorkflow" runat="server" Text="Workflow" />
        </span></a></li>
        <li><a href="#" id="HyperLinkLabelSearch" runat="server"><span >
            <asp:Label  ID="LabelSearching" runat="server" Text="Suchen" />
        </span></a>
            <ul>
                <li>
                    <asp:HyperLink ID="HyperLinkRecipes" runat="server" Text="Rezepte" NavigateUrl="#" />
                </li>
                <li>
                    <asp:HyperLink ID="HyperLinkEncyclopedia" runat="server" Text="Lexikon" NavigateUrl="#" /></li>
                <li>
                    <asp:HyperLink ID="HyperLinkArticle" runat="server" Text="Artikel" NavigateUrl="#" />
                </li>
            </ul>
        </li>
        <li><a href="#" id="HyperLinkLabelLinkQS" runat="server"><span >
            <asp:Label CssClass="LabelLinkQS" ID="LabelLinkQS" runat="server" Text="QS" />
        </span></a>
            <ul>
                <li>
                    <asp:HyperLink ID="HyperLinkQAOverview" runat="server" Text="Rezeptüberblick" NavigateUrl="#" />
                </li>
                <li>
                    <asp:HyperLink ID="HyperLinkQARarelyUsedUnits" runat="server" Text="Rezepte mit selten verwendeten units" NavigateUrl="#" />
                </li>
                <li>
                    <asp:HyperLink ID="HyperLinkQAWrongResolution" runat="server" Text="Rezepte mit Bildern in falscher Auflösung" NavigateUrl="#" />
                </li>
            </ul>
        </li>
        <li><a href="#" id="HyperLinkRelease" runat="server"><span >
            <asp:Label CssClass="LabelLinkWorkflow" ID="LblRelease" runat="server" Text="Veröffentlichung" />
        </span></a></li>
        <li id="ListItemLogin" runat="server"><a href="#" id="HyperLinkLabelLogins" runat="server"><span >
            <asp:Label  ID="LinkLabelLogin" runat="server" Text="Login" />
        </span></a></li>
    </ul>
</div>

现在是css部分：

像

.container
{
     width: auto;
    margin: 10px auto;  
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    -ms-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
    background: rgba(0,0,0,0.7);
}
.toggleMenu
{
    display: none;
    padding: 10px 15px;
    color: #fff;
}
.nav
{
    list-style: none; /**zoom: 1; additional styles */
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    -ms-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
    background: rgba(0,0,0,0.7);
}
.nav:before, .nav:after
{
    content: " ";
    display: table;
}
.nav:after
{
    clear: both;
}

.nav ul
{
    list-style: none;
    width: 9em;
}
.nav a
{
    padding: 10px 15px;
    color: #fff;
}
.nav li
{
    position: relative;
}
.nav > li
{
    float: left;
    border-top: 1px solid #104336;
}

.nav li span span, .nav li a
{
    white-space: nowrap;
    color: White;
    text-transform: uppercase;
    text-shadow: 0px 0px 3px #fff;
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.nav li span
{
}
.nav:hover li span span, .nav:hover li a
{
    text-shadow: 0px 0px 10px #fff;
}
.nav li span span:hover, .nav:hover li a:hover
{
    text-shadow: none;
    color: #fff;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    background: rgba(105,105,105,0.4);
}
nav li:hover li a:hover
{
    background: #95A9B1;
}
.nav > li > .parent
{
    background-image: url("/Context/Pictures/Menu/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a
{
    display: block;
}
.nav li ul
{
    position: absolute;
    left: -9999px; /*nice effect -> left:40%; maybe before" and "after" */
}

.nav li li.hover ul
{
    left: 100%;
    top: 0;
}
.nav li li a
{
    display: block;
    position: relative;
    z-index: 100;
    border-top: 1px solid #175e4c;
}
.nav li li li a
{
    z-index: 200;
    border-top: 1px solid #176451;
}
.nav li li li a:hover, .nav li li a:hover
{
    border: 1px solid;
}
a#HyperLinkLinkQSOverview:hover, a#HyperLinkLinkQS:hover
{
    width: 800px;
    border: 1px solid;
}



@media screen and (min-width: 950px )
{

    /*.nav:hover, ul:first-child li:hover */
    /*, .nav li li.hover ul*/
    .nav > li:hover > ul
    {
        background: rgba(0,0,0,0.9); /*  height:300px;     background-color:Black;    overlapping menu*/ /*another menu */
        left: 0;
        z-index: 10;
        position: fixed;
        -webkit-transition: all 0.4s linear;
        -moz-transition: all 0.4s linear;
        -o-transition: all 0.4s linear;
        -ms-transition: all 0.4s linear;
        transition: all 0.4s linear;
        padding-bottom: 15%; /*.nav > li.hover > ul {}*/
    }

    .nav li li.hover ul
    {
        position: absolute;
        background: rgba(0,0,0,0.9);
        -webkit-transition: all 0.4s linear;
        -moz-transition: all 0.4s linear;
        -o-transition: all 0.4s linear;
        -ms-transition: all 0.4s linear;
        transition: all 0.4s linear;
    }


}

我认为问题出在这里，我确定“固定”位置不正确，但对我而言，这是将菜单放在主要区域（内容所在位置）和折叠幻灯片的唯一方法滑动（而不是整个菜单）。 如果我删除position：fixed和z-index，菜单将扩展整个菜单，菜单将在mouseover上移动整个向下移动鼠标移动.... 我认为代码问题：

    .nav > li:hover > ul
{
    background: rgba(0,0,0,0.9); 
    left: 0;
    z-index: 10;
    position: fixed;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    padding-bottom: 15%; 
}

错误的结果在这里：

http://de.tinypic.com/view.php?pic=108ioi8&s=8#.UvfOV4Vn3O4

我的意思是菜单很好，但它只是在左侧（相同的位置）折叠和展开，我应该在悬停的菜单项下...

我不知道该怎么办...... 请帮忙

1 个答案:

答案 0 :(得分：0)

您是否尝试更改

.nav > li:hover > ul

从位置：固定为绝对？

相关问题
最新问题