Responsive topnav

当我使浏览器窗口变小时，topnav不会跟随并相应匹配。我想要的是一个响应式topnav。我究竟做错了什么？它会自动适合移动屏幕，而不是浏览器窗口？但是，再次，它在w3schools工作。现在用HTML发布。Responsive topnav

这里是CSS：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #141A34; 
} 

ul li {float: left;} 

ul li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

ul li a:hover:not(.active) {background-color: #111;} 

ul li a.active {background-color: #4CAF50;} 

ul li.right {float: right;} 

@media screen and (max-width: 600px){ 
    ul.topnav li.right, 
    ul.topnav li {float: none;} 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
}

HTML：

<ul> 
     <li><a href="ferskvaregrossisten.html">Hjem</a></li> 
     <li><a href="om.html">Om</a></li> 
     <li><a href="kontakt.html">Kontakt</a></li> 
     <li class="dropdown"> 
     <a href="javascript:void(0)" class="dropbtn">Produkter</a> 
     <div class="dropdown-content"> 
     <a href="kjøttvarer.html">Kjøttvarer</a> 
     <a href="pølser.html">Pølser</a> 
     <a href="pålegghelpølse.html">Pålegg hel pølse</a> 
     <a href="kryddersmør.html">Kryddersmør</a> 
     <a href="pakketpålegg.html">Pakket pålegg</a> 
     <a href="kjølevarer.html">Kjølevarer</a> 
     <a href="kjølevarerfiskogskalldyr.html">Kjølevarer fisk og skalldyr</a> 

    </ul>

来源

2017-08-30 Zappoh

从我看到的，这可能不完全解决问题，但在“produckter” – Justin

@Zappoh添加'topnav'类到你的'ul'应该可以正常工作（看到你的媒体中有'topnav'查询*）... – kukkuz

我从媒体查询中删除了topnav 。这工作！ – Zappoh

你忘了关闭<div>和你<li>。请尝试以下的html：

<ul> 
     <li><a href="ferskvaregrossisten.html">Hjem</a></li> 
     <li><a href="om.html">Om</a></li> 
     <li><a href="kontakt.html">Kontakt</a></li> 
     <li class="dropdown"> 
     <a href="javascript:void(0)" class="dropbtn">Produkter</a> 
     <div class="dropdown-content"> 
     <a href="kjøttvarer.html">Kjøttvarer</a> 
     <a href="pølser.html">Pølser</a> 
     <a href="pålegghelpølse.html">Pålegg hel pølse</a> 
     <a href="kryddersmør.html">Kryddersmør</a> 
     <a href="pakketpålegg.html">Pakket pålegg</a> 
     <a href="kjølevarer.html">Kjølevarer</a> 
     <a href="kjølevarerfiskogskalldyr.html">Kjølevarer fisk og skalldyr</a> 
     </div> 
     </li> 
    </ul>

来源

2017-08-30 16:14:35 jfeferman

谢谢！但它仍然没有工作。 – Zappoh

奇怪的是，即使您调整大小，菜单在我看来仍然适合屏幕宽度。看看这[小提琴]（https://jsfiddle.net/jfeferman/yt6vbzwt/）。也许我不理解这个问题。 – jfeferman

现在它适用于我，但只调整了浏览器窗口的大小时，只有一个菜单项位于另一个菜单项下。当我在没有发生任何事情的移动电话上查看它时。 – Zappoh

你忘了添加className到您的 'UL'

在媒体查询，您使用ul.topnav，但在HTML，你ul不具有的className

来源

2017-08-30 17:02:08

https://jsfiddle.net/s38e0p4d/ –

Responsive topnav

回答

相关问题