[英]How do I create a horizontal navigation menu with pure CSS & CSS table?
我是新手,我正在尝试制作我提到的导航。 我在http://www.mattboldt.com/building-great-navbars-toolbars-display-table/上获得了一个教程。 不幸的是,它使用了我不知道的SCSS,而不是纯CSS。
我的代码 -http://codepen.io/rsing4dev/pen/LNqvVN
<p>Please refer to my codepen for the code.
I don't want to paste too much here & make the question big.
问题-当我将鼠标悬停在“服务”菜单上时,其子菜单或子菜单应显示为垂直列表,而不是水平列表。 为什么没有发生这种情况,我该如何解决?
谢谢 !
PS-我更喜欢不使用内联代码块和浮点数来制作我的导航菜单。
内联块通常是最简单的方法。
调整浏览器大小时,内联块和表单元格之间的主要区别是。 如果您使用块调整浏览器的大小,则它们将在其他块的下面放一个-默认情况下,表格单元格不会。
此处的示例(调整输出窗口的大小):
https://jsfiddle.net/dv7k720s/
您还可以查看haltersweb提出的用于表的解决方案。
否则,我还会按照w3schools教程快速重新设置菜单,您可以看一下并尝试理解。
https://jsfiddle.net/LmLbefts/1/
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Services</a>
<div class="dropdown-content">
<a href="#">Our Services</a>
<a href="#">Client List</a>
</div>
</li>
<li><a href="#resources">Resources</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#company">Company</a></li>
<li><a href="#">
<form class="searchbar" action="http://www.google.com/search" name="f" target="_blank" style="margin: 0px">
<input type="hidden" name="any selected">
<input size="10" name="q" value="" class="searchform" placeholder="Web Search">
<input type="submit" value="Go!" name="btnG" class="searchbutton"><br>
</form>
</a></li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9));
line-height: 2em;
text-align: center;
vertical-align: middle;
}
li {
display:inline;
margin-left:2%;
margin-right:2%;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
/* To edit if you want a hover color */
/*background-color: red;*/
}
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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9)); color:white;}
.dropdown:hover .dropdown-content {
display: block;
}
W3School在这里使用基本CSS编写了一个简单的教程,该教程说明了如何创建垂直或水平导航栏:
链接: http : //www.w3schools.com/css/css_navbar.asp
这也是有关下拉菜单如何工作的教程:
(请参阅下面的更新代码,该代码仍使用css表显示。)
您遇到的问题是:
1)您将顶部导航和子导航都分配为表格,并将它们的所有单元格都分配为表格单元。 您仅需要topnav及其列表项。
3)您需要使子导航“转义”顶级导航容器的范围,否则该容器将增长到包括子导航。
请看下面的示例,看看如何使用表格显示以及如何使用绝对位置(相对位置的父级-非常重要)来放置我的子导航。
#nav { background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9)); line-height: 2em; width: 100%; } #nav ul { list-style: none; padding: 0; margin: 0; } .main-nav-menu { display: table; width: 100%; } .main-nav-menu-item { display: table-cell; padding: 0; margin: 0; text-align: center; width: 20%; border-right: 1px solid #131332; position: relative; } .sub-nav-menu { background-color: gray; left: 0; position: absolute; width: 100%; } #nav a { text-decoration: none; color: #CFCFE0; } /* CSS For the submenus of the main navigation menu. */ .sub-nav-menu { display: none; } .main-nav-menu:hover .sub-nav-menu { display: block; }
<div id="nav"> <ul class="main-nav-menu"> <li class="main-nav-menu-item"> <a href="#Services" class="nav-tab selected">Services</a> <ul class="sub-nav-menu"> <li class="sub-nav-menu-item"><a href="#our-services">Our Services</a></li> <li class="sub-nav-menu-item"><a href="#client-list">Client List</a></li> </ul> </li> <li class="main-nav-menu-item"> <a href="#Resources" class="nav-tab">Resources</a> <ul> <li></li> <li></li> </ul> </li> <li class="main-nav-menu-item"> <a href="#Contact-Us" class="nav-tab">Contact Us</a> <ul> <li></li> </ul> </li> <li class="main-nav-menu-item"> <a href="#Company" class="nav-tab">Company</a> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li class="main-nav-menu-item"> <form class="searchbar" action="http://www.google.com/search" name="f" target="_blank" style="margin: 0px"> <input type="hidden" name="any selected"> <input size="10" name="q" value="" class="searchform" placeholder="Web Search"> <input type="submit" value="Go!" name="btnG" class="searchbutton"><br> </form> </li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.