CSS 드롭 다운 메뉴가 왼쪽에서만 확장됩니다.

Question

내 문제는 슬라이드를 슬라이드를 확장하려고하는 메뉴를 갖고 싶지만, 이제는 한 곳에서만 확장되고 메뉴 항목 아래에 있지 않습니다. .

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


} 

같은 나는 문제가 여기 위치 "고정"이 정확하지 않은 것을 스피가 있는지 생각하지만 나를 위해 그것은이다

<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 부분

가질 수있는 유일한 방법 메뉴가 메인 영역 (컨텐츠가있는 곳) 위에 있고 슬라이드로 축소 할 수 있습니다 (전체 메뉴가 아님). position : fixed 및 z-index를 제거하면 메뉴가 전체 메뉴를 확장하고 메뉴가 mouseover에서 전체를 아래로 이동하고 mouseout에서 위로 이동합니다. 코드 문제 :

.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

하지만, 그것은 단지 붕괴와 왼쪽 (같은 위치)에 확대되고, 나는 공중 선회 메뉴 항목 아래에 있어야한다 ...

절대 고정 : 691,363,210 난 더 이상 무엇을 잘 모릅니다

... 는

Answer 1

당신이 위치에서

.nav > li:hover > ul 

을 변경하려고 했 도와주세요?