html css下拉菜单中的导航栏 [英] html css drop down menu in navigation bar
问题描述
我在网站上有以下导航栏。
I have the following navigation bar on website.
我试过将sub nav添加到html，如下所示（您可以在主题和定价标签> subnav 1和2下查看）
I have tried adding a sub nav to html as follows (you can see under subject and pricing tab > subnav 1 and 2)
这里是nav布局的html
here is the html of nav layout
<header>
<nav>
<div class="container">
<div class="wrapper">
<h1><a href="index"><strong>Virtual-Tutor</strong>Center</a></h1>
<ul>
<li><a href="index" class="current">Home</a></li>
<li><a href="language-tutoring">Subjects & Pricing</a>
<ul>
<li><a href="subnav 1">subnav 1</a></li>
<li><a href="subnav 2">subnav 2</a></li>
</ul>
</li>
<li><a href="how-online-tutoring-works">How it Works</a></li>
<li><a href="system-requirements">System Requirements</a></li>
<li><a href="contact-us">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</header>
然而，我无法修复css以匹配原始导航设计的外观和感觉，颜色和布局。
However i am having trouble fixing the css to match the look and feel of the original nav design, color and layout.
header h1 {background:url(../images/logo.png) no-repeat 0 0;padding:2px 0 0 38px;font-family:'ColaborateThinRegular';font-size:26px;line-height:1.2em;color:#fff;font-weight:normal;float:left}
header h1 a {color:#fff;text-decoration:none}
header h1 strong {font-family:'ColaborateBoldRegular';font-weight:normal}
header nav {padding:7px 0 10px 0}
header nav ul {float:right;padding:2px 0 0 0}
header nav ul li {float:left;padding-left:4px}
header nav ul li a {position:relative;float:left;font-size:14px;color:#fff;text-decoration:none;font-family:'ColaborateThinRegular';text-transform:uppercase;height:32px;line-height:32px;background-color:#181717;padding:0 36px 0 10px;border-radius:17px;-moz-border-radius:17px;-webkit-border-radius:17px}
header nav ul li a:hover, header nav ul li a.current {background-image:-moz-linear-gradient(top, #ee3c09, #b90a09);/* FF3.6 */background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #ee3c09),color-stop(1, #b90a09));/* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09');/* IE6,IE7 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09')";/* IE8 */}
header nav ul li a:after {content:'';display:block;position:absolute;right:12px;top:13px;width:4px;height:7px;background:url(../images/arrow1.gif) no-repeat 0 0}
header .adv-content {overflow:hidden;background:#f9f9f9;padding:10px 0 8px 0}
header .breadcrumbs {float:left;padding:3px 0 0 10px}
header .breadcrumbs li {display:inline;color:#212121;padding-left:5px}
通过许多次导航编码样本，但不能弄清楚如何添加一个与父导航栏相同的外观和感觉的subnav。所有示例显示从头开始在自己的设计上工作。可以有人请帮助css吗？
I have gone through numerous sub navigation coding samples but can't figure out how to add a subnav with the same look and feel as the parent navigation bar. all examples show working from scratch on their own design. Can somebody please help with css?
推荐答案
这个论坛是关于你可能会遇到的代码的具体问题，如何为您的网站创建一个完整的功能。
this forum is for specific questions about code you may be struggling with, not general questions about how to create an entire feature for your site.
如果您查看此页面的右侧，您会发现您的问题已被问过几次。你可以查看这些问题，看看其他人如何回答，甚至更好，这里是一个伟大和易于跟踪的教程，你可以检查： http://net.tutsplus.com/tutorials/html-css -techniques / how-to-build-a-kick-butt-css3-mega-drop-down-menu /
If you look to the right side of this page you will find your question has been asked several times before. You can check out those questions and see how others have answered, or even better, here's a great and easy-to-follow tutorial for you to check out: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
这篇关于html css下拉菜单中的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
