Hi all,
I have created a mega menu.
This works however I can't get a big image behind the complete drop down.
For example:
MENUTOP
- sub 1
-- sub sub 1
-- sub sub 2
If someone hovers "MENUTOP" it shows the drop down
I want to have an image for a background for the complete drop down and not just one item.
This is what I have sofar:
PHP to get the menu:
<div id="menu">
<div id="nav_drop">
<ul id="nav">
<li style="margin-left:20px;"><a href="<? bloginfo('siteurl'); ?>">Home</a></li>
<?php
wp_list_pages('title_li=&sort_column=menu_order&depth=0');
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=0&echo=0");
if ($children) {
echo '<ul>' .$children. '</ul>';
}
?>
</ul>
</div>
</div>CSS to style the whole:
#menu{
width:100%;
height:71px;
margin:0 auto;
background:url(images/background_menu.png) no-repeat;
}
#nav_drop{
background:#0000FF;
}
/*navigation menu */
#nav {
bottom:0;
left:0;
margin:0;
padding:0;
width:100%;
z-index:1;
}
#nav, #nav ul {
line-height:40px;
list-style-type:none;
width:100%;
}
#nav a, #nav a:hover {
display:block;
text-decoration:none;
}
#nav li {
float:left;
height:75px;
list-style-type:none;
}
#nav li ul li {
float:left;
list-style-image:url(images/list_style_orange.png) !important;
height:35px;
}
#nav li.page_item page-item-2 a{
float:left;
list-style-type:none;
}
#nav a {
color:#FFFFFF;
font-size:17px;
display:block;
margin: 0 0 0 -20px;
padding: 0 30px 0 20px;
height: 65px;
}
#nav a:hover, #nav a:active{
color:#271d67;
font-size:17px;
background:url(images/menu_back.png) repeat-x;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
text-decoration:none;
}
#nav li ul {
height:auto;
left:-999em;
line-height:30px;
margin: 7px 0 0 -75px;
padding:0;
position:absolute;
width:auto;
z-index:10;
}
#nav li li {
width: 123px;
}
#nav li li a{
color: #E84E0F;
font-size: 12px;
font-weight: bold;
height: 29px;
line-height: 14px;
}
#nav li li a:hover, #nav li li a:active{
background:none;
color: #E84E0F;
font-size: 12px;
text-decoration:underline;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
background:url(images/drop_down_back.png) repeat-y;
width:765px;
}
#nav li ul li ul{
clear:both;
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:auto;
z-index:10;
}
#nav li ul li ul li{
float:left;
list-style-image:url(images/list_style_blue.png) !important;
height:35px;
clear:both;
}
#nav li ul li ul li a{
color: #271d67;
font-size: 11px;
line-height: 10px;
margin-top: 10px;
}
#nav li ul li ul li a:hover, #nav li ul li ul li a:active{
color: #271d67;
text-decoration:underline;
font-size: 11px;
line-height: 10px;
margin-top: 10px;
}
/*navigation menu */M.
