下拉子菜单填充容器大小

Question

我需要一些关于网站横向下拉菜单的帮助。它应该在网页加载时打开。子菜单也必须填满整个容器空间。我工作的公司使用Plone CMS。

提前感谢您的帮助。

＆＃13;

＆＃13;

#main_menu {
   height: 100px;
   width: auto;
}

#main_menu ul {
   margin: 0;
   padding: 0;
   height: 80%;
}

#main_menu li, #shelf_gethelp li, #shelf_web li {
   margin: 0;
   padding: 0;
}

#main_menu a, #shelf_gethelp a, #shelf_web a {
   margin: 0;
   padding: 0;
   text-decoration: none;
}

#main_menu > ul > li {
   float: left;
   position: relative;
   background-color: #AD0000;
   width: 18%;
   height: 100%;
   text-align: center;
   margin-left: 1%;
   margin-right: 1%;
   list-style: none;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow:0 1px 3px #888888;
   -moz-box-shadow:0 1px 3px #888888;
   box-shadow: 0 1px 3px #888888;
}

#main_menu > ul > li > a {
   color: white;
   font-family: Verdana,'Lucida Grande';
   font-size: 18px;
   line-height: 60px;
   padding: 1 5px 20px;
   -webkit-transition: color .15s;
   -moz-transition: color .15s;
   -o-transition: color .15s;
   transition: color .15s;
}

img#link {
   background-color: transparent;
   transform: scale(2.0);
   -ms-transform: scale(2.0);
   -moz-transform: scale(2.0);
   -webkit-transform: scale(2.0);
   -o-transform: scale(2.0);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

img#link:hover {
   transform: scale(2.2);
   -ms-transform: scale(2.2);
   -moz-transform: scale(2.2);
   -webkit-transform: scale(2.2);
   -o-transform: scale(2.2);
}

#main_menu > ul > li > a:hover, #shelf_gethelp > ul > li > a:hover, #shelf_web > ul > li > a:hover { color: white; }

section#shelf {
   height: 388px;
   width: 98%;
   margin-left: 1%;
}

#shelf_gethelp {
   height: 100%;
   width: 100%;
   visibility: visible;
   display: block;
   background: url("/it/images/ddbackground");
   background-size: 1170px 388px;
   background-repeat: no-repeat;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow:0 2px 5px #888888;
   -moz-box-shadow:0 2px 5px #888888;
   box-shadow: 0 2px 5px #888888;
}

#shelf_web {
   height: 100%;
   width: 100%;
   visibility: visible;
   display: none;
   background: url("/it/images/ddbackground");
   background-size: 1170px 388px;
   background-repeat: no-repeat;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow:0 2px 5px #888888;
   -moz-box-shadow:0 2px 5px #888888;
   box-shadow: 0 2px 5px #888888;
}

#shelf_gethelp ul, #shelf_web ul {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow:0 1px 3px #888888;
   -moz-box-shadow:0 1px 3px #888888;
   box-shadow: 0 1px 3px #888888;
}
   
#full_height li {
   float: left;
   position: relative;
   height: 100%;
   line-height: 388px;
   text-align: center;
   list-style: none;
}

.col5 { width: 20%; }

.col4 { width: 25%; }

#shelf_gethelp > ul > li > a, #shelf_web > ul > li > a {
   color: white;
   font-family: Verdana,'Lucida Grande';
   font-size: 18px;
   line-height: 30px;
   padding:1 5px 20px;
}

div#vertical_middle {
   height: 40%;
   width: 60%;
   line-height: 60px;
   margin-top: 50%;
   margin-left: 20%;
}

p#link {
   color: white;
   font-size: 18px;
}

#main_menu > ul > li > a#get_help:hover + div#shelf_gethelp {
   display: block;
   position: absolute;
}

#main_menu > ul > li > a#email_web:hover + div#shelf-web {
   display: block;
   position: absolute;
}

#shelf-web {
   visibility: visible;
   display:none;
}

＆＃13;

<section>
<div id="main_menu">
<ul>
<li><a id="get_help" href="#">Get Help</a></li>
<li><a id="email_web" href="#">Email/Web</a></li>
<li><a id="infrastructure" href="#">Infrastructure</a></li>
<li><a id="direct_services" href="#">Direct Services</a></li>
<li><a id="other_departments" href="#">Other Departments</a></li>
</ul>
</div>
</section> <section id="shelf">
<div id="shelf_gethelp">
<ul id="full_height">
<li class="col5"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/helpdesk" alt="link to the Help Desk" />
<p id="link"><br /><br /><br />Help Desk</p>
</div>
</a></li>
<li class="col5"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/itservices" alt="link to the IT Services" />
<p id="link"><br /><br /><br />IT Services</p>
</div>
</a></li>
<li class="col5"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/assistance" alt="link to the 1:1 Assistance" />
<p id="link"><br /><br /><br />1:1 Assistance</p>
</div>
</a></li>
<li class="col5"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/techstore" alt="link to the Tech Store" />
<p id="link"><br /><br /><br />Tech Store</p>
</div>
</a></li>
<li class="col5"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/dtopsupport" alt="link to the Desktop Support" />
<p id="link"><br /><br /><br />Desktop Support</p>
</div>
</a></li>
</ul>
</div>
<div id="shelf_web">
<ul id="full_height" class="col4">
<li class="col4"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/helpdesk" alt="link to the University Email" />
<p id="link"><br /><br /><br />University Email</p>
</div>
</a></li>
<li class="col4"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/itservices" alt="link to Passwords" />
<p id="link"><br /><br /><br />Passwords</p>
</div>
</a></li>
<li class="col4"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/assistance" alt="link to the Spam Filtering" />
<p id="link"><br /><br /><br />Spam Filtering</p>
</div>
</a></li>
<li class="col4"><a href="#">
<div id="vertical_middle"><img id="link" class="image-inline" src="/it/images/techstore" alt="link to the Web Services" />
<p id="link"><br /><br /><br />Web Services</p>
</div>
</a></li>
</ul>
</div>
</section>

＆＃13;

＆＃13;

＆＃13;