WordPress.org

Forums

[resolved] sub menu not displaying (3 posts)

  1. accounts@push
    Member
    Posted 3 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="http://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="http://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="http://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="http://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="http://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="http://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.

  2. timDesain
    Member
    Posted 3 years ago #

    #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;
    }
  3. caianhua1986
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic