Html CSS下拉菜单-与现有站点集成的问题
我大约一年前创建了一个网站,现在需要在主导航栏中添加一个简单的下拉菜单。我正在尝试将这个stackoverflow解决方案整合到我的网站中:-我无法让它正确显示,如果我粘贴css,整个菜单将显示在屏幕底部附近。如果我像这样粘贴进来:#navul li{,什么也没有出现 我有以下css:Html CSS下拉菜单-与现有站点集成的问题,html,css,Html,Css,我大约一年前创建了一个网站,现在需要在主导航栏中添加一个简单的下拉菜单。我正在尝试将这个stackoverflow解决方案整合到我的网站中:-我无法让它正确显示,如果我粘贴css,整个菜单将显示在屏幕底部附近。如果我像这样粘贴进来:#navul li{,什么也没有出现 我有以下css: /*---- NAVIGATION ----*/ #nav{ background-image:url(images/nav/nav-bar-bg.jpg); width: 1027px;
/*---- NAVIGATION ----*/
#nav{
background-image:url(images/nav/nav-bar-bg.jpg);
width: 1027px;
height: 64px;
margin: 0;
padding: 0;
}
.center {
width:923px;
margin-left: auto;
margin-right:auto;
}
#nav li, #nav a {
display: block;
height: 59px;
padding-top: 3px;
overflow:hidden;
}
#nav li {
float:left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#navHome { width: 106px; }
#navAbout { width: 104px; }
#navPrices { width: 181px; }
#navPrograms { width: 130px; }
#navBuy { width: 170px; }
#navLinks { width: 93px; }
#navContact { width: 139px; }
#navHome a { background: url(images/nav/btn-home.jpg) no-repeat; }
#navAbout a { background: url(images/nav/btn-about.jpg) no-repeat; }
#navPrices a { background: url(images/nav/btn-prices.jpg) no-repeat; }
#navPrograms a { background: url(images/nav/btn-programs.jpg) no-repeat; }
#navBuy a { background: url(images/nav/btn-buy.jpg) no-repeat; }
#navLinks a { background: url(images/nav/btn-links.jpg) no-repeat; }
#navContact a { background: url(images/nav/btn-contact.jpg) no-repeat; }
#navHome a:hover, #navHome a.current { background: url(images/nav/btn-home.jpg) 0 -59px no-repeat; }
#navAbout a:hover, #navAbout a.current { background: url(images/nav/btn-about.jpg) 0 -59px no-repeat; }
#navPrices a:hover, #navPrices a.current { background: url(images/nav/btn-prices.jpg) 0 -59px no-repeat; }
#navPrograms a:hover, #navPrograms a.current { background: url(images/nav/btn-programs.jpg) 0 -59px no-repeat; }
#navBuy a:hover, #navBuy a.current { background: url(images/nav/btn-buy.jpg) 0 -59px no-repeat; }
#navLinks a:hover, #navLinks a.current { background: url(images/nav/btn-links.jpg) 0 -59px no-repeat; }
#navContact a:hover, #navContact a.current { background: url(images/nav/btn-contact.jpg) 0 -59px no-repeat; }
/*---- /NAVIGATION ----*/
以及以下HTML:
<!-- NAVIGATION -->
<div id="nav">
<div class="center">
<ul>
<li id="navHome"><a href="#">Home</a></li>
<li id="navAbout"><a href="#">About</a></li>
<li id="navPrices"><a class="current" href="#">Market Price Reports</a>
<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
</ul>
</li>
<li id="navPrograms"><a href="#">Programs</a></li>
<li id="navBuy"><a href="#">Buy/Sell/Trade</a></li>
<li id="navLinks"><a href="#">Links</a></li>
<li id="navContact"><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
如果您能提供有关如何放置代码的任何帮助,我们将不胜感激
提前感谢,鲍勃试试这个:
/*---- NAVIGATION ----*/
#nav {
width: 1027px;
height: 64px;
margin: 0;
padding: 0;
}
.center {
width:923px;
margin-left: auto;
margin-right:auto;
}
#nav ul {
display: block;
}
#nav li, #nav a {
display: block;
height: 59px;
padding-top: 3px;
}
#nav li {
float:left;
list-style: none;
display: inline-block;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position: relative;
left: 20px;
top: 0px;
}
#navHome {
width: 106px;
}
#navAbout {
width: 104px;
}
#navPrices {
width: 181px;
}
#navPrograms {
width: 130px;
}
#navBuy {
width: 170px;
}
#navLinks {
width: 93px;
}
#navContact {
width: 139px;
}
#navHome a {
background: url(images/nav/btn-home.jpg) no-repeat;
}
#navAbout a {
background: url(images/nav/btn-about.jpg) no-repeat;
}
#navPrices a {
background: url(images/nav/btn-prices.jpg) no-repeat;
}
#navPrograms a {
background: url(images/nav/btn-programs.jpg) no-repeat;
}
#navBuy a {
background: url(images/nav/btn-buy.jpg) no-repeat;
}
#navLinks a {
background: url(images/nav/btn-links.jpg) no-repeat;
}
#navContact a {
background: url(images/nav/btn-contact.jpg) no-repeat;
}
#navHome a:hover, #navHome a.current {
background: url(images/nav/btn-home.jpg) 0 -59px no-repeat;
}
#navAbout a:hover, #navAbout a.current {
background: url(images/nav/btn-about.jpg) 0 -59px no-repeat;
}
#navPrices a:hover, #navPrices a.current {
background: url(images/nav/btn-prices.jpg) 0 -59px no-repeat;
}
#navPrograms a:hover, #navPrograms a.current {
background: url(images/nav/btn-programs.jpg) 0 -59px no-repeat;
}
#navBuy a:hover, #navBuy a.current {
background: url(images/nav/btn-buy.jpg) 0 -59px no-repeat;
}
#navLinks a:hover, #navLinks a.current {
background: url(images/nav/btn-links.jpg) 0 -59px no-repeat;
}
#navContact a:hover, #navContact a.current {
background: url(images/nav/btn-contact.jpg) 0 -59px no-repeat;
}
/*---- /NAVIGATION ----*/
谢谢你给我一个进入的方向:)但是删除文本缩进:-9999px将文本添加到图像上,下拉菜单使用顶部菜单中的图像,文本重叠。您好,我只是想让您知道,从这里,我终于能够找到如何正确显示它。谢谢:)非常欢迎。我想我应该拥有我我说过这都是关于绝对/相对定位的,但我相信你已经找到了答案。:)