[英]Adding Hover to current nav bar
I currently have a HTML template i'm using and am trying to add a drop down on hover menu (Didn't come with the template). 我目前有一个正在使用的HTML模板,正在尝试在悬停菜单上添加一个下拉列表(该模板未附带)。 I know i have to change the CSS, the HTML is correct. 我知道我必须更改CSS,HTML是正确的。
Basically i want to have the user hover over the "trailers" part and have 3 sub menu items under it where they can select what kind of trailer they want to look at. 基本上,我希望用户将鼠标悬停在“预告片”部分上,并在其下有3个子菜单项,他们可以在其中选择想要查看的预告片。
HTML Code: HTML代码:
<nav>
<div id="menubar">
<ul id="nav">
<li class="current"><a href="index.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="sales.html">Sales</a></li>
<li><a href="trailers.html">Trailers</a><ul>
<li><a href="#">Custom Trailers</a></li>
<li><a href="#">Customized Trailers</a></li>
<li><a href="#">Base Trailers</a></li>
</ul></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div><!--close menubar-->
</nav>
Here is the CSS: 这是CSS:
#nav {
margin: 0;
padding: 0;
}
ul#nav
{ margin:0;}
ul#nav li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;
}
ul#nav li a
{ float: left;
font: bold 120% Arial, Helvetica, sans-serif;
height: 24px;
margin: 10px 0 0 20px;
text-shadow: 1px 1px #000;
padding: 6px 20px 0 20px;
background: transparent;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #FFF;
text-decoration: none;}
ul#nav li.current a
{ color: #000;
text-shadow: none;}
ul#nav li:hover a
{ color: #000;
text-shadow: none;}
I have tried methods i have found online, but the current "hover" css is screwing with me when i add it. 我已经尝试过在网上找到的方法,但是当我添加它时,当前的“ hover” css正在与我搞混。 I'm very lost and not sure where to start or where to put what when i get the code from other sites. 当我从其他站点获取代码时,我很失落,不确定从哪里开始或在哪里放置什么。 Any help would be appreciated! 任何帮助,将不胜感激! I know this is probably something simple that I am just not seeing, but its been a while since i've done this type of CSS. 我知道这很简单,我只是看不到,但是已经有一段时间了,因为我已经完成了这种类型的CSS。
Thanks! 谢谢!
Try this one: 试试这个:
Slightly modified HTML so you can use inline-block with % width for your nav headings: 稍作修改的HTML,因此您可以将导航栏标题的宽度为%宽度用于内联代码块:
<nav>
<div id="menubar">
<ul id="nav">
<li class="current"><a href="index.html">About Us</a></li><!--
--><li><a href="services.html">Services</a></li><!--
--><li><a href="sales.html">Sales</a></li><!--
--><li class="dropdown">
<a href="trailers.html">Trailers</a>
<ul>
<li><a href="#">Custom Trailers</a></li>
<li><a href="#">Customized Trailers</a></li>
<li><a href="#">Base Trailers</a></li>
</ul>
</li><!--
--><li><a href="contact.html">Contact Us</a></li>
</ul>
</div><!--close menubar-->
</nav>
<div id="restofpage">
</div>
And the CSS: 和CSS:
#nav {
margin: 0;
padding: 0;
}
ul#nav {
margin:0;
}
ul#nav > li {
width:20%;
}
ul#nav li {
padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline-block;
vertical-align:top;
background: transparent;
}
ul#nav li a {
font: bold 120% Arial, Helvetica, sans-serif;
height: 24px;
text-shadow: 1px 1px #000;
padding: 6px 20px 0 20px;
background: transparent;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #FFF;
text-decoration: none;
}
ul#nav li.current a {
color: #000;
text-shadow: none;
}
ul#nav li:hover a {
color: #000;
text-shadow: none;
}
#nav ul {
display:none;
}
#nav li.dropdown:hover ul{
display:block;
margin:0;
padding:0;
height:0;
overflow:visible;
}
#nav li.dropdown ul li{
margin:0;
display:block;
word-wrap:none;
white-space:nowrap;
}
#restofpage{
background:#369;
height:500px;
width:100%;
}
And the fiddle: http://jsfiddle.net/UUEx8/ 和小提琴: http : //jsfiddle.net/UUEx8/
This simply switches display from "none" to "block", but you could use some fancy css transitions (on opacity, transform, position, etc.) to get some slick effects. 这只是将显示从“无”切换到“阻止”,但是您可以使用一些奇特的CSS过渡(不透明度,变换,位置等)来获得一些平滑的效果。
No background on the dropdown, style away! 下拉菜单中没有背景,风格别样!
您的问题不清楚。...要添加CSS下拉菜单,请参阅此如何制作基于CSS的纯下拉菜单?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.