Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Exclamation problem in drop down menu

    hi all,
    i have a problem,
    i have a menu like this,
    Code:
    <div class="nav">
    <ul><li><a href="#">products</a>
    <ul><li><a href="">category1<a>
     <ul class="child-category">
    <li><a href="#">child category 2</a></li>
    <li><a href="#">child category 3</a></li>
    </ul>
    <ul>
    <li><a href="">product of category 1<a/></li>
    <li><a href="">product of category 1<a/></li>
    </ul>
    </li>
    </ul>
    </div>
    it must show the menu like this.
    porduct
    category1
    child category 2
    child category 3
    product of category 1
    product of category 1
    but it only show the products not the child categories,
    i m using the wordpress builtin style sheet for menu. but it is no working.

    is there any way that i remove ul tag of child categories and insert its li to the ul of product with javascrip or jquery,
    or anr way through css,
    thanks in advance.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your HTML is a mess (to be frank..!) so I suggest you fix this first before looking to JavaScript solutions.

    The tags that you use all require closing. So,
    <li>Requires the following closing tag</li>

    Tags are closed like </this> NOT <this/>

    Tags should not overlap <like>this<this></like></this>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Just to show you what Andrew means, here is your HTML properly indented.
    As you can see, you have a missing </li> and a missing </ul>.

    Whether or not the ones I show here (in red) match the missing ones only you can tell us. Your browser *MAY BE* automatically supplying them where I am showing, but it could be automatically supplying them someplace else. When you miss things like this, different browser can (and sometimes do) interpret them differently.

    Code:
    <div class="nav">
        <ul>
            <li>
                <a href="#">products</a>
                <ul>
                     <li>
                         <a href="">category1<a>
                         <ul class="child-category">
                             <li><a href="#">child category 2</a></li>
                             <li><a href="#">child category 3</a></li>
                         </ul>
                         <ul>
                             <li><a href="">product of category 1<a/></li>
                             <li><a href="">product of category 1<a/></li>
                         </ul>
                    </li>
                </ul>
            </li><!-- missing -->
        </ul><!-- missing -->
    </div>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    yes Old Pedant ,
    yes Exactly this my html but it only shows the " product of category 1" not the "child category 2" and "child category 3" in drop down when mouse over on category1.
    below is my stylesheet.

    Code:
    #nav {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }
    #nav ul {
    	font-size: 13px;
    	list-style: none;
    	margin: 0 0 0 -0.8125em;
    	padding-left: 0;
    }
    #nav li {
    	float: left;
    	position: relative;
    }
    #nav a {
    	color: #eee;
    	display: block;
    	line-height: 3.333em;
    	padding: 0 1.2125em;
    	text-decoration: none;
    }
    #nav ul ul {
    	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	float: left;
    	margin: 0;
    	position: absolute;
    	top: 3.333em;
    	left: 0;
    	width: 188px;
    	z-index: 99999;
    }
    #nav ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #nav ul ul a {
    	background: #f9f9f9;
    	border-bottom: 1px dotted #ddd;
    	color: #444;
    	font-size: 13px;
    	font-weight: normal;
    	height: auto;
    	line-height: 1.4em;
    	padding: 10px 10px;
    	width: 168px;
    }
    #nav li:hover > a,
    #nav ul ul :hover > a,
    #nav a:focus {
    	background: #efefef;
    }
    #nav li:hover > a,
    #nav a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    	color: #373737;
    }
    #nav ul li:hover > ul {
    	display: block;
    }
    #nav .current-menu-item > a,
    #nav .current-menu-ancestor > a,
    #nav .current_page_item > a,
    #nav .current_page_ancestor > a {
    	font-weight: bold;
    }
    thanks in advance for your help.
    Last edited by burki; 12-17-2012 at 08:53 AM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Not in my testing.

    Here, a COMPLETE HTML PAGE using your code and my FIXED to your HTML.
    Code:
    <html>
    <head>
    <style type="text/css">
    #nav {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }
    #nav ul {
    	font-size: 13px;
    	list-style: none;
    	margin: 0 0 0 -0.8125em;
    	padding-left: 0;
    }
    #nav li {
    	float: left;
    	position: relative;
    }
    #nav a {
    	color: #eee;
    	display: block;
    	line-height: 3.333em;
    	padding: 0 1.2125em;
    	text-decoration: none;
    }
    #nav ul ul {
    	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	float: left;
    	margin: 0;
    	position: absolute;
    	top: 3.333em;
    	left: 0;
    	width: 188px;
    	z-index: 99999;
    }
    #nav ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #nav ul ul a {
    	background: #f9f9f9;
    	border-bottom: 1px dotted #ddd;
    	color: #444;
    	font-size: 13px;
    	font-weight: normal;
    	height: auto;
    	line-height: 1.4em;
    	padding: 10px 10px;
    	width: 168px;
    }
    #nav li:hover > a,
    #nav ul ul :hover > a,
    #nav a:focus {
    	background: #efefef;
    }
    #nav li:hover > a,
    #nav a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    	color: #373737;
    }
    #nav ul li:hover > ul {
    	display: block;
    }
    #nav .current-menu-item > a,
    #nav .current-menu-ancestor > a,
    #nav .current_page_item > a,
    #nav .current_page_ancestor > a {
    	font-weight: bold;
    </style>
    </head>
    <body>
    
    <div class="nav">
        <ul>
            <li>
                <a href="#">products</a>
                <ul>
                     <li>
                         <a href="">category1<a>
                         <ul class="child-category">
                             <li><a href="#">child category 2</a></li>
                             <li><a href="#">child category 3</a></li>
                         </ul>
                         <ul>
                             <li><a href="">product of category 1<a/></li>
                             <li><a href="">product of category 1<a/></li>
                         </ul>
                    </li>
                </ul>
            </li><!-- missing -->
        </ul><!-- missing -->
    </div>
    </body>
    </html>
    EVERYTHING shows up.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh...no wonder!

    You showed
    Code:
    <div class="nav">
    in your first post, and it should be
    Code:
    <div id="nav">
    !!!!

    Yes, now I see what you see.

    But I *STILL* think you may have a problem in your </li> and </ul>.

    I think that the ones I put in (the ones in red in my first post) are PROBABLY in the WRONG PLACES.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Hmmm...look what happens if you reverse the two:
    Code:
    <div id="nav">
        <ul>
            <li>
                <a href="#">products</a>
                <ul>
                     <li>
                         <a href="">category1<a>
                         <ul>
                             <li><a href="">product of category 1 FIRST<a/></li>
                             <li><a href="">product of category 1 SECOND<a/></li>
                         </ul>
                         <ul class="child-category">
                             <li><a href="#">child category 2</a></li>
                             <li><a href="#">child category 3</a></li>
                         </ul>
                    </li>
                </ul>
            </li><!-- missing -->
        </ul><!-- missing -->
    </div>
    Well, in any case, this is in the WRONG FORUM

    This has NOTHING to do with JAVASCRIPT.

    You should post this in the CSS forum.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •