我遇到下拉菜单的问题我无法弄清楚问题。由于第一个子菜单显示在下拉菜单中，但其余部分未显示在例如主菜单中，因此还有3个子菜单，第1页，第2页和第3页，因此只显示第1页链接，其余部分则显示因为它们隐藏在页面包装器下面就是示例http://master2.net.catillo.dk/Velkommen.aspx?AreaID=1
/* Header */
#header-wrapper
{
}
#header
{
overflow: hidden;
min-height: 205px;
position: relative;
}
/* Logo */
#logo
{
overflow: hidden;
height: 160px;
}
#logo h1 a
{
display: block;
padding: 30px 0px 0px 0px;
letter-spacing: -1px;
text-align: center;
text-decoration: none;
text-shadow: -1px -1px 0px #2C7485;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 44pt;
font-weight: 200;
color: #FFFFFF;
}
#logo p
{
padding: 10px 0px 0px 0px;
letter-spacing: -1px;
text-align: center;
text-shadow: -1px -1px 0px #388ACA;
font-family: 'Abel', sans-serif;
font-size: 18pt;
color: #A5D0F2;
}
/* Menu */
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#menu-wrapper
{
background: url(images/img05.jpg) no-repeat center top ;
}
#menu {
padding: 0; margin: 0; border: 0;
}
#menu ul, #menu li {
list-style: none; margin: 0; padding: 0;
}
#menu ul {
position: relative; z-index: 597;
}
#menu ul li {
float: left; min-height: 1px; vertical-align: middle;
}
#menu ul li.hover,
#menu ul li:hover {
position: relative; z-index: 599; cursor: default;
}
#menu ul ul {
visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;
}
#menu ul ul li {
float: none;
}
#menu ul ul ul {
top: 0; left: auto; right: -99.5%;
}
#menu ul li:hover > ul {
visibility: visible;
}
#menu ul ul {
bottom: 0; left: 0;
}
#menu ul ul {
margin-top: 0;
}
#menu ul ul li {
font-weight: normal;
}
#menu a {
display: block; line-height: 1em; text-decoration: none;
}
#menu {
margin-left:auto;
margin-right:auto;
border-bottom: 1px solid;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#menu > ul {
display: inline-block;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu a {
color: #CBCBCB;
padding: 0 20px;
line-height: 50px;
}
#menu ul { text-transform: uppercase; }
#menu ul ul {
text-transform: none;
min-width: 190px;
z-index: 1000;
line-height: 50px;
}
#menu ul ul a {
background: #1b9bff; /* drop down color*/
color: #FFF;
border: 1px solid #1b9bff;
border-top: 0 none;
padding: 0px 20px;
}
#menu ul ul ul { border-top: 0 none; }
#menu ul ul li { position: relative; min-height:100%; }
#menu > ul > li > a { line-height: 48px; }
#menu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#menu ul ul li:hover > a { background: #35a6ff; }
#menu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#menu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#menu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#menu ul li:hover > a, {
background: #1b9bff;
color: #FFF;
}
#menu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#menu ul li.last ul
{
left: auto;
right: 0;
}
#menu ul li.last ul ul
{
left: auto;
right: 99.5%;
}
/* Banner */
#banner
{
overflow: hidden;
padding: 0px 30px 30px 30px;
}
#banner a img
{
display: block;
width: 100%;
}
/* Content */
#content {
padding: 0px 0px 0px 30px;
float: left;
margin-left:0px;
}
.column2 #content {
padding: 0px 30px 0px 0px;
float: left;
}
#content h2 {
letter-spacing: -1px;
text-transform: uppercase;
font-size: 30pt;
color: #2A2A2A;
float: left;
}
#content .subtitle {
padding: 0px 0px 30px 0px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 16pt;
font-weight: 300;
color: #00A6FA;
float: left;
}
#content img {
padding: 0px 0px 30px 0px;
}
#content a img {
display: block;
width: 100%;
}
/* Sidebar */
#sidebar {
padding: 10px 0px 0px 0px;
float: left;
}
#sidebar1 {
padding: 10px 0px 0px 0px;
float: left;
}
.column2 #sidebar {
padding: 10px 0px 0px 30px;
}
#sidebar h2
{
letter-spacing: -1px;
text-transform: uppercase;
font-size: 22pt;
color: #2A2A2A;
}
#sidebar .subtitle
{
padding: 0px 0px 30px 0px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 16pt;
font-weight: 300;
color: #00A6FA;
}
/** DIVIDER */
.divider
{
margin: 30px 30px;
}
/** One Column Content */
#onecolumn
{
overflow: hidden;
padding: 0px 30px 50px 30px;
}
#onecolumn img
{
float: left;
margin-right: 30px;
}
#onecolumn a img
{
}
#onecolumn h2
{
letter-spacing: -1px;
text-transform: uppercase;
font-size: 30pt;
color: #2A2A2A;
}
#onecolumn .subtitle {
padding: 0px 0px 10px 0px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 16pt;
font-weight: 300;
color: #00A6FA;
}
/** Footer Column Content */
#footer-content {
overflow: hidden;
padding: 30px 0px 0px 0px;
}
#footer-content h2 {
padding: 0px 0px 40px 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 24pt;
color: #2A2A2A;
}
#footer-content #box1 section
{
padding-left: 30px;
}
#footer-content #box3 section
{
padding-right: 30px;
}
这里是style.css
@import url(http://fonts.googleapis.com/css?family=Abel|Satisfy);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);
@import url('../Settings/form.css');
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #4AA0E4 url(images/img01.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #8A8A8A;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
p {
line-height: 180%;
}
a {
color: #00A6FA;
}
strong {
font-weight: 700;
color: #2A2A2A;
}
/* Header */
#header-wrapper {
overflow: hidden;
height: 340px;
z-index:1000;
}
/* Menu Wrapper */
#menu-wrapper {
height: 800px;
background: url(images/img05.jpg) no-repeat center top;
z-index:1000;
}
#menu {
height: 300px;
z-index:1000;
}
/* Page Wrapper */
#page-wrapper {
z-index: -1;
background: url(images/img03.jpg) repeat;
}
#page-bgtop {
z-index: -1;
}
#page-bgbtm {
z-index: -1;
background: url(images/img04.jpg) repeat-x left bottom;
}
#page {
z-index: -1;
padding: 0px 0px 50px 0px;
background: #FFFFFF url(images/img09.jpg) repeat;
}
#page-content-wrapper {
z-index: -1;
background: #FFFFFF;
padding-top: 20px;
}
/* Copyright */
#copyright {
overflow: hidden;
padding: 50px 0px;
background: url(images/img10.png) no-repeat center top;
}
#copyright p {
text-align: center;
text-shadow: -1px -1px 0px #1E6BA6;
font-family: 'Abel', sans-serif;
font-size: 11pt;
color: #FFFFFF;
}
#copyright a {
color: #FFFFFF;
}
.button-style {
display: block;
width: 174px;
height: 50px;
margin-top: 20px;
background: url(images/img06.jpg) no-repeat left top;
text-align: center;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
color: #FFFFFF;
}
/** BUTTON STYLE 1 */
.button-style a {
line-height: 50px;
letter-spacing: -1px;
text-shadow: -1px -1px 0px #1E6BA6;
text-decoration: none;
font-size: 16pt;
color: #FFFFFF;
}
/** LIST STYLE 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
padding: 20px 0px 20px 0px;
background: url(images/img08.png) repeat-x left top;
}
ul.style1 a {
display: block;
text-decoration: none;
color: #8A8A8A;
}
ul.style1 p {
line-height: 200%;
}
ul.style1 a:hover {
text-decoration: underline;
}
ul.style1 .date {
float: left;
width: 78px;
height: 78px;
margin: 0px 25px 0px 0px;
padding: 4px 0px 0px 0px;
background: url(images/img07.jpg) no-repeat left top;
line-height: normal;
text-align: center;
text-shadow: 1px 1px 0px #2C7485;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
}
ul.style1 .date b {
display: block;
margin: 5px 0px 0px 0px;
padding: 0;
letter-spacing: -1px;
text-shadow: 1px 1px 0px #2C7485;
font-size: 40px;
font-weight: 400;
color: #FFFFFF;
}
ul.style1 .date a {
color: #FFFFFF;
}
ul.style1 .date a:hover {
text-decoration: none;
}
ul.style1 .first {
padding-top: 0px;
background: none;
}
/** DIVIDER */
.divider {
height: 4px;
background: url(images/img08.png) repeat-x left top;
}
这是HTML
<!DOCTYPE HTML>
<html>
<head>
<title><!--@Title--></title>
<!--@MetaTags-->
<!--@CopyRightNotice-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<noscript>
<link rel="stylesheet" href="/Files/Templates/Designs/html5templates_aqueous/css/5grid/core.css" />
<link rel="stylesheet" href="/Files/Templates/Designs/html5templates_aqueous/css/5grid/core-desktop.css" />
<link rel="stylesheet" href="/Files/Templates/Designs/html5templates_aqueous/css/5grid/core-1200px.css" />
<link rel="stylesheet" href="/Files/Templates/Designs/html5templates_aqueous/css/5grid/core-noscript.css" />
<link rel="stylesheet" href="/Files/Templates/Designs/html5templates_aqueous/css/style.css" />
<link rel="stylesheet" href="/Files/Templates/Designs/html5templates_aqueous/css/style-desktop.css" />
</noscript>
<script src="/Files/Templates/Designs/html5templates_aqueous/css/5grid/jquery.js"></script>
<script src="/Files/Templates/Designs/html5templates_aqueous/css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/files/system/jCarousel/jcarousellite_1.0.1.js"></script>
<!--[if IE 9]><link rel="stylesheet" href="css/style-ie9.css" /><![endif]-->
<!--@Stylesheets-->
<!--@Javascripts-->
</head><body>
<div id="header-wrapper">
<header id="header">
<div class="5grid-layout">
<div class="row">
<div class="12u" id="logo"> <!-- Logo -->
<a href="/">
<img src="<!--@Item.Area.LogoImage-->" Style=" display:block; margin-left:auto; margin-right:auto; margin-top:15px; "/>
<div class="mobileUI-site-name"><!--@Item.Area.Logotext--></div></a>
<p><!--@Item.Area.Logotext--></p>
</div>
</div>
</div>
<div id="menu-wrapper" style="z-index: -1;">
<div class="5grid-layout">
<div class="row">
<div class="12u" id="menu" style="z-index: -1;">
<nav class="mobileUI-site-nav">
<ul class="dwnavigation" id="navigation" settings="startlevel:1;endlevel:2;template:liclean.xslt;expandmode:all;id:dummy;">
<li class="current_page_item"><a href="index.html">Homepage</a></li>
<li><a href="twocolumn1.html">Two Column #1</a></li>
<li><a href="twocolumn2.html">Two Column #2</a></li>
<li><a href="onecolumn.html">One Column</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
</div>
<div id="page-wrapper" style="z-index: -1;">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="page" class="5grid-layout">
<div id="page-content-wrapper">
<div class="row">
<div class="12u">
<div id="banner" class="dwcontent" title="Top Content"><a href="#"><img src="/Files/Templates/Designs/html5templates_aqueous/images/pics01.jpg" alt="" /></a></div>
</div>
</div>
<div class="row">
<div class="12u">
<div id="sidebar1" class="dwcontent" title="left Content">
<section id="sidebar">
<h2>Gravida nibh quis urna</h2>
<p class="subtitle">praesent a lacus</p>
<ul class="style1">
<li class="first">
<p class="date"><a href="#">September<b>11</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
<li>
<p class="date"><a href="#">September<b>09</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
<li>
<p class="date"><a href="#">September<b>07</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
<li>
<p class="date"><a href="#">September<b>04</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
<li>
<p class="date"><a href="#">September<b>01</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
</ul>
</section>
</div>
<div class="row">
<div class="8u">
<section id="content" class="dwcontent" title="Main Content">
<h2>Integer gravida nibh quis urna</h2>
<p class="subtitle">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna</p>
<p><a href="#"><img src="/Files/Templates/Designs/html5templates_aqueous/images/pics02.jpg" alt="" /></a></p>
<p>Welcome to <strong>Aqueous</strong>, a free responsive HTML5 website template designed by <a href="http://html5templates.com/">HTML5Templates.com</a>. It features a neat and clean color combination, a spacious content area, and a large banner area, making it a great design for a corporate/portfolio type of website. And like all of our templates, it is built on HTML5 and CSS3, has full responsive support for desktops, tablets, and mobile devices, and is 100% free to use personally or commercially under the <a href="http://html5templates.com/license/">Creative Commons license</a>. Be sure to check out our <a href="http://html5templates.com/">website</a> for more awesome free HTML5 templates and follow us on <a href="http://twitter.com/HTML5T">Twitter</a> for updates and new releases! Enjoy!</p>
<p class="button-style"><a href="#">Read Full Article</a></p>
</section>
</div>
<div class="4u">
<section id="sidebar" class="dwcontent" title="right content">
<h2>Gravida nibh quis urna</h2>
<p class="subtitle">praesent a lacus at urna</p>
<ul class="style1">
<li class="first">
<p class="date"><a href="#">September<b>11</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
<li>
<p class="date"><a href="#">September<b>09</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
<li>
<p class="date"><a href="#">September<b>07</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
</ul>
</section>
</div>
</div>
</div>
</div>
<div class="row">
<section>
<div class="divider"></div>
</section>
</div>
<div class="dwcontent" id="onecolumn" title="bottom content">
<div class="12u">
<section>
<div><a href="#"><img src="/Files/Templates/Designs/html5templates_aqueous/images/pics03.jpg" alt="" /></a>
<h2>Integer gravida nibh quis urna</h2>
<p class="subtitle">Donec leo, vivamus fermentum nibh in augue praesent sed lacus</p>
<p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor. Nulla facilisi. Cum sociis natoque penatibus et magnis dis montes, nascetur ridiculus mus. Sed blandit. Phasellus pellentesque, ante nec iaculis, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor. Nulla facilisi. Cum sociis natoque penatibus et magnis dis montes, nascetur ridiculus mus. Sed blandit. </p>
</div>
</section>
</div>
</div>
</div>
<div class="row">
<div class="12u">
<div class="row" id="footer-content">
<div class="4u" id="box1">
<section>
<h2>Maecenas luctus lectus</h2>
<ul class="style1">
<li class="first">
<p class="date"><a href="#">September<b>11</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
<li>
<p class="date"><a href="#">September<b>09</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus.</a></p>
</li>
</ul>
</section>
</div>
<div class="4u" id="box2">
<section>
<h2>Donec dictum metus</h2>
<ul class="style1">
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
<li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li>
</ul>
</section>
</div>
<div class="4u" id="box3">
<section>
<h2>Nulla luctus eleifend</h2>
<ul class="style1">
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
<li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="copyright" class="5grid-layout">
<section>
<div class="by-catillo"><a href="javascript:void(0);" onclick="window.open('http://www.catillo.dk/Default.aspx?ID=170&un=<!--@Item.Area.BrugerE_mail-->&pn=<!--@Global:Page.Name.UrlEncode()-->&url=' + encodeURI(location),'_blank','width=1050,height=750,resizable=yes,scrollbars=yes');">Support</a>
</section>
</div>
</body>
</html>