WordPress.org

1. accounts@push
   Member
   Posted 1 year 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 1 year 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 10 months 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.