sub menu not displaying

  • Resolved accounts@push

    (@accountspush)


    13 years ago

    hi there,

    i’m trying to make my sub-menu appear when i hover over the standard top level menu items . the structure works like standard wp menu’s but i cannot seem to get my css to display the second level of menus.

    this is the css im using:

    }
.menu-item a {
	color:#000;
	display:block;
	text-decoration:none;
	border-bottom:1px solid #f0f0f0;
	background-image:url(sg_website-4_media/menu%20BG.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
	padding:5px;
	padding-right:7px;
	padding-left:7px;
}

.menu-item a:hover {
	color:#000;
	display:block;
	text-decoration:none;
	border-bottom:1px solid #f0f0f0;
	background-image:url(sg_website-4_media/menu%20BG%20hover.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
	padding:5px;
	padding-right:7px;
	padding-left:7px;
}

.menu-item {
	float:left;
	text-decoration: none;
	list-style:none;

}

    my menu layout is as follows in live code:

    <div id="mainwpmenutree">
           <div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="https://localhost/wordpress/?page_id=2">Sample Page</a>
<ul class="sub-menu">
	<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="https://localhost/wordpress/?page_id=12">child page</a></li>
	<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="https://localhost/wordpress/?page_id=6">page 3</a></li>
</ul>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="https://localhost/wordpress/?page_id=4">sample page 2</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="https://localhost/wordpress/?page_id=8">page 4</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="https://localhost/wordpress/?page_id=10">page 5</a></li>
</ul></div>
        </div>

    if anyone could help me out here that would be so awesome – ive been stuck on this for weeks and havnt gotten anywhere.

Viewing 2 replies - 1 through 2 (of 2 total)
  • TimDesain

    (@timdesain)

    #menu-main * {
list-style: none;
margin:0;
padding: 0;
}
#menu-main li {
float: left;
list-style:none;
position:relative;
margin: 0 2px 2px 0;
}

#menu-main li a,
#menu-main li a:visited {
text-decoration: none;
font-family: FluxRegular, Tahoma , Arial, Sans-Serif;
font-size: 14px;
line-height: 24px;
display: block;
padding: 0px 10px;
color: #fff;
background: #c30300;
}
#menu-main li a:hover {
}
#menu-main .current-menu-parent > a,
#menu-main .current-menu-parent > a:visited ,
#menu-main .current-menu-item > a,
#menu-main .current-menu-item > a:visited {
color: #fff;
background: #333;
}
#menu-main li a:hover ,
#menu-main .current-menu-parent > a,
#menu-main .current-menu-parent > a:visited ,
#menu-main .current-menu-item > a,
#menu-main .current-menu-item > a:visited {
background-color: #000;
color:#fff
}

#menu-main ul {
position: absolute;
width: 200px;
left: -999em;
z-index: 50;
padding: 6px 0 0 0;
}
#menu-main ul li{
display: block;
float: left;
width: 180px;
}
#menu-main ul li a{
padding: 0px 10px;
}

#menu-main li.current-menu-item a,
#menu-main li.current-menu-item a:visited{
}
#menu-main li:hover ul ul,
#menu-main li:hover ul ul ul,
#menu-main li.sfhover ul ul,
#menu-main li.sfhover ul ul ul {
left: -999em;
}
#menu-main li:hover ul,
#menu-main li li:hover ul,
#menu-main li li li:hover ul,
#menu-main li.sfhover ul,
#menu-main li li.sfhover ul,
#menu-main li li li.sfhover ul {
left: auto;
}

    oh very good ,but,I aslo don’t konw ,how to diy the class=”menu-main-container” css layout. who can say that, thanks given!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘sub menu not displaying’ is closed to new replies.