麻煩對準子菜單與父件

嗨即時試圖建立一個導航欄，當你懸停裏另一個列表從側面出來，以顯示其他選項。我的問題我可以得到與第一個李，我不知道如何做與列表的其餘部分。目前下拉列表保持在同一位置。麻煩對準子菜單與父件

我敢肯定，我沒有解釋的不夠好，這裏是我的代碼。

<body class="menu"> 
<header> 
    <nav class="menu-side"> 
    <ul> 
       <li class="icon-home"><a href="Premiership.html"><span>Home</span></a></li> 

      <li class="arrow"> <a class="star" href="#">England</a> 
       <ul> 
        <li><a class="ee" href="Premiership.html">Premiership</a> 
        </li> 
        <li><a href= "Unavailble.html">Championship</a> 
        </li> 
        <li><a href="Unavailble.html">League 1</a> 
        </li> 
        <li><a href="Unavailble.html">League 2</a> 
        </li> 
       </ul> 
      </li> 
      <li class="arrow"> <a href="#">France</a> 
       <ul > 
        <li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a> 
        </li> 
       </ul> 
      </li> 
      <li class="arrow"> <a href="#">Germany </a> 

       <ul> 
        <li><a class="ee" href="Unavailble.html">Bundesliga</a> 
        </li> 
       </ul> 
      </li> 
      <li class="arrow"> <a href="#">Italy</a> 

       <ul> 
        <li><a class="ee" href="Unavailble.html">Serie A</a> 
        </li> 
       </ul> 
      </li> 
      <li class="arrow"> <a href="#">Spain</a> 
       <ul> 
        <li><a class="ee" href="Unavailble.html">La Liga</a> 
        </li> 
       </ul> 
      </li> 
     </ul>  
    </nav> 

    </header> 


</body>

https://jsfiddle.net/2zov6q2v/

來源

2015-07-20 user3660857

您列出的改變保證金：

nav ul ul { 
    height: auto; 
    display: none; 
    position:absolute; 
    background-color: #399077; 
    margin-left: 89.5%; 
    //top: 9%; delete this line 
    margin-top: -38px; //add this line 
    z-index:150; 
}

jsfiddle

來源

2015-07-20 19:33:24 Keammoort

.menu { 
 
    position: relative; 
 
    left: 0; 
 
} 
 
.menu-open { 
 
    left: 0; 
 
} 
 
.menu-open .menu-side { 
 
    left: 0; 
 
} 
 
.menu-side, 
 
menu { 
 
    -webkit-transition: left 0.2s ease; 
 
    -moz-transition: left 0.2s ease; 
 
    transition: left 0.2s ease; 
 
} 
 
.menu-side { 
 
    background-color: #333; 
 
    color: #fff; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 210px; 
 
    height: 100%; 
 
    padding: 2px; 
 
} 
 
body { 
 
    display: block; 
 
    margin: 8px; 
 
    background: #f0f0f0; 
 
} 
 
nav ul { 
 
    background-color: #43a286; 
 
    /* overflow: hidden; <----------------- here */ 
 
    color: white; 
 
    padding: 0; 
 
    text-align: center; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: max-height 0.4s; 
 
    -ms-transition: max-height 0.4s; 
 
    -moz-transition: max-height 0.4s; 
 
    -o-transition: max-height 0.4s; 
 
    transition: max-height 0.4s; 
 
} 
 
nav ul li { 
 
    display: block; 
 
    padding: 20px; 
 
    width: 80%; 
 
    text-align: center; 
 
    position: relative; /* <------------------ and here */ 
 
} 
 
nav ul li:hover { 
 
    background-color: #399077; 
 
} 
 
nav ul .arrow:hover { 
 
    border-right: 10px solid white; 
 
    border-right-width: thick; 
 
    width: 79%; 
 
} 
 
nav ul ul { 
 
    height: auto; 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #399077; 
 
    left: 89.5%; 
 
    top: 9%; 
 
    z-index: 150; 
 
} 
 
nav ul ul li { 
 
    display: block; 
 
    width: 75%; 
 
    text-align: center; 
 
} 
 
nav ul li:hover ul { 
 
    display: block; 
 
    width: 165px; 
 
} 
 
/*nav .ee:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 8px solid black; 
 
    border-right: 8px solid transparent; 
 
    border-left: 8px solid transparent; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0%; 
 
    left: 50%; 
 
    margin-left: -6px 
 
} */ 
 

 
nav ul li a, 
 
visited { 
 
    color: white; 
 
    font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 
nav ul ul li a:hover { 
 
    color: white; 
 
    font-size: 20px; 
 
}

<body class="menu"> 
 
    <header> 
 
    <nav class="menu-side"> 
 
     <ul> 
 
     <li class="icon-home"><a href="Premiership.html"><span>Home</span></a> 
 
     </li> 
 
     <li class="arrow"> <a class="star" href="#">England</a> 
 

 
      <ul> 
 
      <li><a class="ee" href="Premiership.html">Premiership</a> 
 

 
      </li> 
 
      <li><a href="Unavailble.html">Championship</a> 
 

 
      </li> 
 
      <li><a href="Unavailble.html">League 1</a> 
 

 
      </li> 
 
      <li><a href="Unavailble.html">League 2</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="arrow"> <a href="#">France</a> 
 

 
      <ul> 
 
      <li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="arrow"> <a href="#">Germany </a> 
 

 
      <ul> 
 
      <li><a class="ee" href="Unavailble.html">Bundesliga</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="arrow"> <a href="#">Italy</a> 
 

 
      <ul> 
 
      <li><a class="ee" href="Unavailble.html">Serie A</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="arrow"> <a href="#">Spain</a> 
 

 
      <ul> 
 
      <li><a class="ee" href="Unavailble.html">La Liga</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</body>

來源

2015-07-20 19:32:19 isherwood

或許應該改變這樣的：'頂：9％;''到頂部：0;'也 – zgood

想過。不確定OP想要什麼。 – isherwood

改變這種風格

.menu{ 
 
\t position: relative; 
 
\t left: 0; 
 
\t 
 
} 
 

 
.menu-open{ 
 
left: 0; 
 

 

 
} 
 

 
.menu-open .menu-side{ 
 
left: 0; 
 

 
} 
 

 
.menu-side, menu { 
 
-webkit-transition: left 0.2s ease; 
 
-moz-transition: left 0.2s ease; 
 
transition: left 0.2s ease; 
 

 
} 
 

 
.menu-side{ 
 
\t background-color: #333; 
 
\t color: #fff; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 210px; 
 
\t height: 100%; 
 
\t padding: 2px; 
 
} 
 

 
body{ 
 
display: block; 
 
\t margin: 8px; 
 
background: #f0f0f0; 
 
} 
 

 

 
nav ul{ 
 
    background-color: #43a286; 
 
\t color:white; 
 
    padding: 0; 
 
\t text-align: center; 
 
\t margin: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t -webkit-transition: max-height 0.4s; 
 
\t -ms-transition: max-height 0.4s; 
 
\t -moz-transition: max-height 0.4s; 
 
\t -o-transition: max-height 0.4s; 
 
\t transition: max-height 0.4s; 
 
} 
 

 
nav ul li{ 
 
    display: block; 
 
    padding: 20px; 
 
    width: 80%; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
nav ul li:hover { 
 
background-color: #399077; 
 
\t 
 
} 
 

 
nav ul .arrow:hover{ 
 
border-right: 10px solid white; 
 
border-right-width: thick; 
 
width: 79%; 
 
} 
 

 
nav ul ul { 
 
\t height: auto; 
 
\t display: none; 
 
\t background-color: #399077; 
 
\t left: 212px; 
 
    position: absolute; 
 
    top: 0; 
 
\t z-index:150; 
 
} 
 

 
nav ul ul li{ 
 
    display: block; 
 
    width:75%; 
 
\t text-align: center; 
 
} 
 

 

 
nav ul li:hover ul{ 
 

 
\t display: block; 
 
     width: 165px; 
 
} 
 

 
/*nav .ee:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 8px solid black; 
 
    border-right: 8px solid transparent; 
 
    border-left: 8px solid transparent; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0%; 
 
    left: 50%; 
 
    margin-left: -6px 
 
} */ 
 

 
nav ul li a, visited{ 
 
color:white; 
 
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif; 
 
display: block; 
 
text-decoration: none; 
 
} 
 

 
nav ul ul li a:hover{ 
 
color:white; 
 
font-size: 20px; 
 
}

<body class="menu"> 
 
<header> 
 
\t <nav class="menu-side"> 
 
\t <ul> 
 
\t \t \t <li class="icon-home"><a href="Premiership.html"><span>Home</span></a></li> 
 
\t \t \t 
 
      <li class="arrow"> <a class="star" href="#">England</a> 
 
       <ul> 
 
        <li><a class="ee" href="Premiership.html">Premiership</a> 
 
        </li> 
 
        <li><a href= "Unavailble.html">Championship</a> 
 
        </li> 
 
        <li><a href="Unavailble.html">League 1</a> 
 
        </li> 
 
        <li><a href="Unavailble.html">League 2</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li class="arrow"> <a href="#">France</a> 
 
       <ul > 
 
        <li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li class="arrow"> <a href="#">Germany </a> 
 

 
       <ul> 
 
        <li><a class="ee" href="Unavailble.html">Bundesliga</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li class="arrow"> <a href="#">Italy</a> 
 

 
       <ul> 
 
        <li><a class="ee" href="Unavailble.html">Serie A</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li class="arrow"> <a href="#">Spain</a> 
 
       <ul> 
 
        <li><a class="ee" href="Unavailble.html">La Liga</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul>  
 
\t </nav> 
 
\t 
 
\t </header> 
 
\t 
 
\t 
 
</body>

來源

2015-07-20 19:39:45 Chandru

看到這個更新JSFiddle。設置li年代到position: relative;和ul ul's到position: absolute。從那裏，你可以設置ul ul的left到100%。這將他們推到父母的右邊。徘徊時，您可以使用left: calc(100% + 5px)來解釋li的白色右邊框。不需要混亂的利潤。

來源

2015-07-20 20:47:36

麻煩對準子菜單與父件

回答

相關問題