响应式导航菜单元素倒退

此双栈导航的顶层菜单显示结果倒退。我尝试造型

<li>'s

单独或者它没有工作，或者我做错了。我也掏出了很多头发，但那也没用。：D请任何人都请点亮一些光？非常感谢！

<!DOCTYPE html> 
<html> 
<head> 
<!--From secondary Nav - find out what this does--> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
body {margin:0;} 
ul.PrimaryNav {list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#000;text-transform:uppercase;} 
ul.PrimaryNav li {float:right;color:#FFFFFF;} 
ul.PrimaryNav li a {display:inline-block;color:#FFFFFF;;text-align:center;padding:20px 20px;text-decoration:none;transition:0.3s;font-size:17px;} 
ul.PrimaryNav li a:hover {background-color:#111;color:#FFFFFF;} 
ul.PrimaryNav li.icon {display:none;} 

@media screen and (max-width:680px) { 
ul.PrimaryNav li:not(:first-child) {display:none;} 
ul.PrimaryNav li.icon {float:right;display:inline-block;} 

ul.PrimaryNav.responsive {position:relative;} 
ul.PrimaryNav.responsive li.icon {position:absolute;right:0;top:0;} 
ul.PrimaryNav.responsive li {float:none;display:inline;} 
ul.PrimaryNav.responsive li a {display:block;text-align:left;} 
} 

@media screen and (min-width:680px) { 
ul.PrimaryNav {width:100%; float:right;} 
} 

ul.secondaryNav {list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#CC0000;text-transform:uppercase;} 
ul.secondaryNav li {float:left;} 
ul.secondaryNav li a {display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none;} 
ul.secondaryNav li a:hover:not(.active) {color:#FFFF00;} 
ul.secondaryNav li a.active {background-color:#CC0000;} 

@media screen and (min-width:320px) and (max-width:680px) { 
ul.secondaryNav li {float:left;width:100%;border-radius:0px 0px 0px 0px;-webkit-border-radius:0px 0px 0px 0px;-moz-border-radius:0px 0px 0px 0px;border-bottom:1px solid #000;} 
} 

@media screen and (min-width:680px) { 
ul.secondaryNav {border-radius:0px 0px 10px 0px;-webkit-border-radius:0px 0px 10px 0px;-moz-border-radius:0px 0px 10px 0px;width:680px;} 
} 

</style> 
</head> 
<body> 

<ul class="PrimaryNav"> 
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> 
<li><a class="active" href="#home" role="navigation">Home ICON</a></li> 
<li><a href="#news">Solutions</a></li> 
<li><a href="#contact">Results</a></li> 
<li><a href="#about">Clients</a></li> 
<li><a href="#about">Create Wealth</a></li> 
<li><a href="#about">About</a></li> 
<li><a href="#about">Charity</a></li> 
</ul> 

<ul class="secondaryNav"> 
<li><a href="#home">Design &amp; Build</a></li> 
<li><a href="#news">Digital Marketing</a></li> 
<li><a href="#contact">Measurement &amp; Improvement</a></li> 
</ul> 


<script> 
function myFunction() { 
document.getElementsByClassName("PrimaryNav")[0].classList.toggle("responsive"); 
} 
</script> 

</body> 
</html>

来源

2016-07-07 Andrea B

那是因为你是浮动的每个李权 - 你应该只浮动适用于UL（迫使它在屏幕的右侧）不适用于每个立在UL：

ul.PrimaryNav li {float:right;color:#FFFFFF;}

应该

ul.PrimaryNav {float:right;.... 
ul.PrimaryNav li {color:#FFFFFF;}

这将导致显示在屏幕的右侧整个UL，但在它的每个李将根据你让他们列出的顺序显示。您还需要检查其他代码是否存在冲突的float：正确的行为。

来源

2016-07-07 02:05:55 gavgrif

感谢您的快速响应！我之前尝试过，它只是将菜单向下扩展。我也不能使用： ul.PrimaryNav li a {float：right; ，因为它将菜单元素分散在较小的屏幕上。尝试使用显示和宽度：100％，但仍然没有运气。请问你有什么想法？再次感谢！ –

这看起来像是一个明显的答案，但没有解决它...浮动左边简单地分隔顶部的导航到小屏幕上的第二个导航的左侧。这可能需要放入一个文件来测试..谢谢，希望！ –

好 - 首先要注意的是，即使列表在页面下方 - 它按照正确的顺序。然后，你需要看看为什么它会在页面上显示 - 这是因为你在这些页面上显示：inline-block。如果你改变它来显示：inline，那么它将在一行中消失 - 那么你必须将ul浮起来。希望这有助于:) – gavgrif

响应式导航菜单元素倒退

回答

相关问题