HTML下拉菜單從左到右，而不是直下。顯示：塊不工作

當我徘徊，而不是直接垂直出現在它下面列出的球隊在小組導航欄，它會下降1然後從左至右顯示了它，我爲什麼，因爲在導航UL李也不太清楚：懸停> UL我把顯示：塊這在理論上應該工作HTML下拉菜單從左到右，而不是直下。顯示：塊不工作

nav ul { 
 
    /*Manages locations of the nav boxes*/ 
 
    display: block; 
 
    list-style-image: none; 
 
    list-style-position: outside; 
 
    list-style-type: none; 
 
    margin: 0 0 0 -12px; 
 
    padding: 0px; 
 
} 
 

 
nav ul li { 
 
    /*Orders the nav boxes from left to right*/ 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    /* All the boxes like News, Table etc*/ 
 
    display: inline-block; 
 
    padding: 17px 17px 17px 17px; 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    display: block; 
 
    line-height: 40px; 
 
    font: 95% Helvetica, Arial, sans-serif; 
 
    color: #66ff66; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
    font-size: 15px; 
 
} 
 

 
nav ul li a:hover { 
 
    opacity: .7; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
} 
 

 
nav ul li:hover>ul { 
 
    display: block; 
 
}

<nav> 
 
    <div class="panel center"> 
 
    <ul> 
 
     <li><a href="Home.html">Home</a></li> 
 
     <!--All the pages on the website--> 
 
     <li><a href="SerieA_Tables.html">Table</a></li> 
 
     <li><a href="News.html">News</a></li> 
 
     <li><a href="Teams.html">Teams</a> 
 
     <ul> 
 
      <li><a href="#">Juventus</a></li> 
 
      <li><a href="#">AC Milan</a></li> 
 
      <li><a href="#">Torino</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="About.html">About</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2017-06-28 Workkkkk

'導航UL ul'的問題是把它拿出來，看看有什麼變化？ – mahatmanich

它不修復。它只是將隊列擴展到3個子列的相同長度，不再隱藏它們 – Workkkkk

浮動：左邊是導致其在導航UL裏。它讓導航下的所有li都被左移。如果將其更改爲nav> div> ul> li，它將解決問題。

nav ul {    /*Manages locations of the nav boxes*/ 
 
display:block; 
 
list-style-image: none; 
 
list-style-position: outside; 
 
list-style-type: none; 
 
margin: 0 0 0 -12px; 
 
padding:0px; 
 

 
} 
 

 
nav>div>ul>li { /*Orders the nav boxes from left to right*/ 
 
float:left; 
 
} 
 

 
nav ul li a {    /* All the boxes like News, Table etc*/ 
 
display:inline-block; 
 
padding: 17px 17px 17px 17px; 
 
background-color: gray; 
 
border:1px solid black; 
 
display: block; 
 
line-height: 40px; 
 
font: 95% Helvetica, Arial, sans-serif; 
 
color: #66ff66; 
 
text-decoration: none; 
 
border-radius: 5px; 
 
font-size: 15px; 
 
} 
 

 
nav ul li a:hover{ 
 
opacity: .7; 
 
text-decoration: none; 
 
display:block; 
 
} 
 

 
nav ul ul{    
 
display:none; 
 
position:absolute; 
 
} 
 

 
nav ul li:hover > ul{ /*Highlights box when you hover over it*/ 
 
display:block; 
 
}

<nav> 
 
     <div class="panel center"> 
 
      <ul>  
 
       <li><a href="Home.html">Home</a></li>    <!--All the pages on the website--> 
 
       <li><a href="SerieA_Tables.html">Table</a></li> 
 
       <li><a href="News.html">News</a></li> 
 
       <li><a href="Teams.html">Teams</a> 
 
        <ul> 
 
         <li><a href = "#">Juventus</a></li> 
 
         <li><a href = "#">AC Milan</a></li> 
 
         <li><a href = "#">Torino</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="About.html">About</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

來源

2017-06-28 20:16:17

啊，謝謝。我錯過了 – Workkkkk

標記我的答案是正確的嗎？ –

剛剛做到了。謝謝 – Workkkkk

而不是使用您li小號float:left;，使用display:inline-block，但請務必只針對家長li S以便子菜單li s的仍然堆放在每個頂部其他。

nav ul {    /*Manages locations of the nav boxes*/ 
 
display:block; 
 
list-style-image: none; 
 
list-style-position: outside; 
 
list-style-type: none; 
 
margin: 0 0 0 -12px; 
 
padding:0px; 
 
} 
 

 
.panel > ul > li { 
 
display:inline-block; 
 
} 
 

 
nav ul li a {    /* All the boxes like News, Table etc*/ 
 
display:inline-block; 
 
padding: 17px 17px 17px 17px; 
 
background-color: gray; 
 
border:1px solid black; 
 
display: block; 
 
line-height: 40px; 
 
font: 95% Helvetica, Arial, sans-serif; 
 
color: #66ff66; 
 
text-decoration: none; 
 
border-radius: 5px; 
 
font-size: 15px; 
 
} 
 

 
nav ul li a:hover{ 
 
opacity: .7; 
 
text-decoration: none; 
 
display:block; 
 
} 
 

 
nav ul ul{    
 
display:none; 
 
position:absolute; 
 
} 
 

 
nav ul li:hover > ul{ 
 
display:block; 
 
}

<nav> 
 
    <div class="panel center"> 
 
     <ul>  
 
      <li><a href="Home.html">Home</a></li>    <!--All the pages on the website--> 
 
      <li><a href="SerieA_Tables.html">Table</a></li> 
 
      <li><a href="News.html">News</a></li> 
 
      <li><a href="Teams.html">Teams</a> 
 
       <ul> 
 
        <li><a href = "#">Juventus</a></li> 
 
        <li><a href = "#">AC Milan</a></li> 
 
        <li><a href = "#">Torino</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="About.html">About</a></li> 
 
     </ul> 
 
    </div> 
 
</nav>

來源

2017-06-28 20:16:56 APAD1

HTML下拉菜單從左到右，而不是直下。顯示：塊不工作

回答

相關問題