编辑
我创建了一个水平菜单，在其中一个链接上有一个水平子菜单。我正在做网站的人现在想要的子菜单去垂直。我不能工作出什么CSS代码，我需要改变，以使子菜单从父链接向下拉。代码如下:
产品父链接为isl-timber.com。
提前感谢您的帮助。
这是修改后的CSS导航:
#top_nav {
width: 1050px;
height: 66px;
margin-left: 106px;
z-index: 10;
}
#top_nav ul {
list-style: none;
padding: 0px;
margin-left: auto;
margin-right: auto;
width: 780px;
position: relative;
display: inline-table;
}
#top_nav li {
float: left;
}
#top_nav li a {
font: 20px Stencil;
color: #FF0;
font-weight: normal;
text-decoration: none;
text-align: center;
display: block;
float: left;
width: 154px;
height: 61px;
line-height: 54px;
}
#top_nav li a:hover, #top_nav li .active {
background: url(../images/active.png) center;
}
#top_nav li ul {
display: none;
position: absolute;
top: 100%;
width: 154px;
}
#top_nav li:hover > ul {
display: block; /*block*/
}
#top_nav li ul li {
float: none;
position: relative;
}
#top_nav li ul a {
font: 12px Verdana, Geneva, sans-serif;
padding-top: 12px;
height: 30px;
background-color: #FFF;
color: #000;
}
And the amended CSS for the #prew_img tag:
#prew_img {
height: 297px;
z-index: 5;
}
下面是HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Island Timber & Building Supplies | Home</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="stylesheets/itbm_styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="top_nav">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="">Products</a>
<ul>
<li><a href="paintshop.html">Paintshop</a></li>
<li><a href="timber.html">Timber</a></li>
<li><a href="buildingins.html">Building Materials & Insulation</a></li>
<li><a href="adhesivesfix.html">Adhesives & Fixings</a></li>
<li><a href="toolscloth.html">Tools & Clothing</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="offers.html">Offers</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="top_padding"> </div>
<div id="prew_img">
<ul class="round">
<li><img src="images/paintshop_scroll_border.jpg" alt="Island Timber Johnstones paint shop" /></li>
<li><img src="images/timberyard_scroll_border.jpg" alt="Island Timber Yard" /></li>
<li><img src="images/shop_scroll_border.jpg" alt="Island Timber shop" /></li>
<li><img src="images/wagon_scroll_border.jpg" alt="Island Timber delivery wagon" /></li>
<li><img src="images/tools_scroll_border.jpg" alt="Island Timber tools section" /></li>
<li><img src="images/adhesives_scroll_border.jpg" alt="Island Timber adhesives section" /></li>
</ul>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.roundabout.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.round').roundabout();
});
</script>
<div id="middle_padding"></div>
<div id="content_container">
<div id="main_content">
<div id="overview">
<h3>HOME</h3>
<p>Established in 1998, Island & Timber Building Materials Ltd, based in Ballasalla, Isle of Man, have been fulfilling the needs of both the professional trade and the keen DIYer ever since. Our site carries a broad range of products which are in stock and available immediately for collection or delivery.</p><br />
<p>We are members of the National Merchant Buying Society and have access to a wide range of suppliers so we can ensure we are providing excellent quality products at the best prices possible.</p><br />
<p>We run a reliable delivery service and orders placed before 1:00pm are delivered next day. We offer cash on delivery and telephone payments for our non account customers and our fleet of specialist vehicles can cater for all delivery requirements.</p><br />
<p>In our sawmill we have experienced staff to cut timber and sheet materials to your specifications.</p><br />
<p>We pride ourselves on our excellent customer service, from enquiry through to delivery and our knowledgable team are always on hand to help and advise you, our valued customers.</p><br />
<p>Please enjoy browsing our website, here you will see a fraction of the types of products we hold in stock, if you don't see what you are looking for please ask a member of the team, via our <a href="contact.html"> Contact page </a> or call us on 01624 827 338, and we will endeavour to source the product at the best price possible for you.</p>
</div>
</div>
<div id="right_col">
<div id="suppliers">
<h3>Some of our suppliers</h3>
<div class="supplier_pic_line">
<img src="images/everbuild_logo.jpg" alt="Ever Build logo" />
<img src="images/faithfull_logo.jpg" alt="Faithfull Tools logo" />
</div>
<div class="supplier_pic_line">
<img src="images/knauf_insulation_logo.jpg" alt="Knauf Insulation logo" />
<img src="images/marshalltown_logo.jpg" alt="Marshalltown logo" />
</div>
<div class="supplier_pic_line">
<img src="images/johnstones_logo.jpg" alt="Johnstones Paints logo" />
<img src="images/olympic_fixings_logo.jpg" alt="Olympic Fixings logo" />
</div>
<div class="supplier_pic_line">
<img src="images/stanley_logo.jpg" alt="Stanley Tools logo" />
<img src="images/irwin_logo.jpg" alt="Irwin Tools logo" />
</div>
</div>
<div id="opening_times">
<h3>Opening Times</h3>
<p class="opening_times">Mon - Thurs - 7:30am to 5:00pm</p>
<p class="opening_times">Friday - 7:30am to 4:30pm</p>
<p class="opening_times">Saturday - 7:30am to 12:00pm</p>
<p class="opening_times">Sunday - Closed</p>
<br />
<p class="opening_times">Tel: (01624) 827338</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
改变这个:
#top_nav li ul {
position: absolute; top: 100%;;
}
这:
#top_nav li ul {
position: absolute; top: 100%; width:200px;
}
应该可以解决你的问题干杯，Marco
编辑
#top_nav {
width: 1050px;
height: 66px;
margin-left: 106px;
}
#top_nav ul {
padding-left: 0px;
list-style: none;
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 780px;
position: relative;
display: inline-table;
z-index: 1010;
}
#top_nav ul li {
float: left;
}
#top_nav ul li a {
font: 20px Stencil;
color: #FF0;
font-weight: normal;
text-decoration: none;
text-align: center;
display: block;
float: left;
width: 154px;
height: 61px;
line-height: 54px;
}
#top_nav ul li a:hover, #top_nav li .active {
background: url(../images/active.png) center;
}
#top_nav ul li ul {
display: none;
position: absolute; top: 100%; width: 200px;
}
#top_nav ul li:hover > ul {
display: block; /*block*/
}
#top_nav ul li ul li {
float: none;
position: relative;
background-color:red !important;
}
#top_nav ul li ul li a:active{
background: url(images/active.png) center;
}
#top_nav ul li ul li a:hover{
background-color:red;
}
#top_nav ul li ul a {
font: 12px Verdana, Geneva, sans-serif;
padding-top: 12px;
height: 30px;
background-color: #FFF;
color: #000;
}