html - CSS 下拉菜单仅在左侧扩展

标签 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 菜单将展开整个菜单并且菜单将在鼠标悬停时向下移动整个菜单并在鼠标移出时向上移动.... 我认为的代码问题:

    .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

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

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

最佳答案

你有没有尝试改变

.nav > li:hover > ul

从位置:固定到绝对？

关于html - CSS 下拉菜单仅在左侧扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21663639/

上一篇：css - 删除溢出 :hidden changes the layout

下一篇：html - 用图片和下拉菜单排列页面

相关文章：

javascript - 向下滚动时，容器Div溢出将被裁剪

php - 即使值与第一个下拉菜单相同，我是否仍然需要使用 JQuery 来填充第二个下拉菜单？

javascript - 在 iframe 中自动缩放(调整大小)图像

javascript - 在输入错误的密码时显示消息

javascript - 如何让滚动动画发挥作用(轮盘赌)

javascript - 选择第二个元素子javascript

javascript - jQuery脉动代码与滚动图像jQuery代码冲突

javascript - CSS/js z-index(zIndex) 下拉菜单

c# - 如何将数据绑定(bind)到 HTML 选择框

html - 跳转页面超链接不起作用。

©2024 IT工具网  联系我们