Advanced Search

Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: how hide/show submenus_inner ul needed wrapped inside divs

  1. #1
    Join Date
    Jan 2012
    Posts
    74
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default how hide/show submenus_inner ul needed wrapped inside divs

    When I have a menu like below how hide/show submenus, ul inside ul (ul ul):
    poliscarhire.com/new4.php // inner ul needed wrapped inside divs??
    HTML Code:
    <style type="text/css">
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    position:absolute;
    }
    li
    {
    float:left;
    }
    .noDecor1
    {
    display:block;
    width:97px;
    background-color:#dddddd;
    }
    </style>
    
    <style type="text/css">/* submenues */
    noShow
    {
    list-style-type:none;
    margin:0;
    padding:0;
    
    position:absolute;
    }
    
    .noShow li
    {
    float:center;
    }
    .noDecor a 
    {
    display:block;
    /* width:100px; */
    background-color:#dddddd;
    }
    </style>
    ................
    ................
    <div id="menu" style="height:20px"><ul>
    <li><a href="../index.php" class="noDecor1">Home</a></li>
    <li><a href="../quote/subquote/processorquote.php?sort=0" class="noDecor1">Cars <img onclick="changeDisplay('hc10');" src="../images/drop-down-arrow.gif" alt="Drop down menu exist" width="14" height="14" border="0" /></a><ul class="noShow bordertableblack" id="hc10">
               <li id="all"><a href="../quote/subquote/processorquote.php?sort=0" class="noDecor">All Cars Info/Quote</a></li>
               <li id="popular"><a href="../quote/subquote/processorquote.php?sort=popular" class="noDecor">Popular Cars</a></li>
               <li id="salon"><a href="../quote/subquote/processorquote.php?sort=salon" class="noDecor">Salon cars Only</a></li>
               <li id="wd4"><a href="../quote/subquote/processorquote.php?sort=4wd" class="noDecor">4WD cars Only</a></li>
               <li id="mpvs"><a href="../quote/subquote/processorquote.php?sort=mpvs" class="noDecor">7&amp;8 Seater/MPVS Only</a></li>
               <li id="open"><a href="../quote/subquote/processorquote.php?sort=cabrios" class="noDecor">Cabrios/OpenTop Only</a></li>
               <li id="manual"><a href="../quote/subquote/processorquote.php?sort=2" class="noDecor">Manual cars Only</a></li>
               <li id="auto"><a href="../quote/subquote/processorquote.php?sort=1" class="noDecor">Auto cars Only</a></li>
               <li id="a"><a href="../quote/subquote/processorquote.php?sort=a" class="noDecor">Group A - Subcompact</a></li>
               <li id="b1"><a href="../quote/subquote/processorquote.php?sort=b1" class="noDecor">Group B1 - Subcompact</a></li>
               <li id="b2"><a href="../quote/subquote/processorquote.php?sort=b2" class="noDecor">Group B2 - Subcompact</a></li>
               <li id="c"><a href="../quote/subquote/processorquote.php?sort=c" class="noDecor">Group C - Intermediate</a></li>
               <li id="d"><a href="../quote/subquote/processorquote.php?sort=d" class="noDecor">Group D - Compact</a></li>
               <li id="d1"><a href="../quote/subquote/processorquote.php?sort=d1" class="noDecor">Group D1 - Compact</a></li>
               <li id="e1"><a href="../quote/subquote/processorquote.php?sort=e1" class="noDecor">Group E1 - Luxury</a></li>
               <li id="e2"><a href="../quote/subquote/processorquote.php?sort=e2" class="noDecor">Group E2 - Luxury</a></li>
               <li id="f"><a href="../quote/subquote/processorquote.php?sort=f" class="noDecor">Group F - Luxury</a></li>
               <li id="g"><a href="../quote/subquote/processorquote.php?sort=g" class="noDecor">Group G - 4 Wheel Drive</a></li>
               <li id="h1"><a href="../quote/subquote/processorquote.php?sort=h1" class="noDecor">Group H1 - 4WD-7seater</a></li>
               <li id="h2"><a href="../quote/subquote/processorquote.php?sort=h2" class="noDecor">Group H2 - 4WD-7seater</a></li>
               <li id="i"><a href="../quote/subquote/processorquote.php?sort=i" class="noDecor">Group I - Luxury</a></li>
               <li id="j"><a href="../quote/subquote/processorquote.php?sort=j" class="noDecor">Group J - 4 Wheel Drive</a></li>
               <li id="k1"><a href="../quote/subquote/processorquote.php?sort=k1" class="noDecor">Group K1 - 4 Wheel Drive</a></li>
               <li id="k2"><a href="../quote/subquote/processorquote.php?sort=k2" class="noDecor">Group K2 - 4WD(with full extras)</a></li>
               <li id="n"><a href="../quote/subquote/processorquote.php?sort=n" class="noDecor">Group N - Luxury</a></li>
               <li id="p1"><a href="../quote/subquote/processorquote.php?sort=p1" class="noDecor">Group P1 - Luxury-7seater</a></li>
               <li id="p2"><a href="../quote/subquote/processorquote.php?sort=p2" class="noDecor">Group P2 - Mini Bus-8seater</a></li>
               <li id="s"><a href="../quote/subquote/processorquote.php?sort=s" class="noDecor">Group S - Subcompact/SmartCar</a></li>
               <li id="u"><a href="../quote/subquote/processorquote.php?sort=u" class="noDecor">Group U - Pickup 4x4 Double Cabin</a></li></ul></li>
    <li><a href="../rates.php" class="noDecor1">Rates</a></li>
    <li><a href="../hotdeals.php" class="noDecor1">Hot Deals </a></li>
    <li><a href="../terms.php" class="noDecor1">Terms</a></li>
    <li><a href="../contact.php" class="noDecor1">Contact Us <img src="../images/drop-down-arrow.gif" alt="Drop down menu exist" width="14" height="14" border="0" /></a><ul class="noShow bordertableblack" id="hc1">        
    		<li id="info"><a href="../contact.php" class="noDecor">Contact Info / Map</a></li>
            <li id="webform2"><a href="../webform.php" class="noDecor">Contact Web Form</a></li>
            <li id="callyouback"><a href="../callyouback.php" class="noDecor">Request call you back</a></li>
            <li id="contactwebmaster"><a href="../webmaster/contact-webmaster.php" class="noDecor">Contact WebMaster</a></li>
            <li id="contactaffiliate"><a href="../affiliates/contact-affiliate-department.php" class="noDecor">Contact Affiliate Department</a></li></ul></li>
    <li><a href="../about.php" class="noDecor1">About Us </a></li>
    <li><a href="../polis.php" class="noDecor1">Touring Info <img src="../images/drop-down-arrow.gif" alt="Drop down menu exist" width="14" height="14" border="0" /></a><ul class="noShow bordertableblack" id="plumbing">	
    	<li id="maps"><a href="../maps.php" class="noDecor">Polis/Pafos/Cyprus Maps</a></li>
    	<li id="links"><a href="../links.php" class="noDecor">Polis/Pafos/Cyprus Links</a></li>
    	<li id="accommodation"><a href="../accommodation.php" target="_blank" class="noDecor">Polis/Pafos Accommodation</a></li>
    	<li id="polis"><a href="../polis.php" class="noDecor">Polis Mini Guide</a></li>
    	<li id="pafos"><a href="../pafos.php" class="noDecor">Pafos Mini Guide</a></li>
    	<li id="limassol"><a href="../limassol.php" class="noDecor">Limassol Mini Guide</a></li>
    	<li id="cy"><a href="../cy.php" class="noDecor">Cyprus Mini Guide</a></li></ul></li>
    <li><a href="https://www.poliscarhire.com/customeradmin/customeradminhome.php" class="noDecor1">My Account <img src="../images/drop-down-arrow.gif" alt="Drop down menu exist" width="14" height="14" border="0" /></a><ul class="noShow bordertableblack" id="hc"><li id="caccount"><a href="https://www.poliscarhire.com/customeradmin/customeradminhome.php" class="noDecor">Customer Admin Area</a></li>
           <li id="clogin"><a href="https://www.poliscarhire.com/customeradmin/login.php" class="noDecor">Customer Login</a></li><li id="cregister"><a href="https://www.poliscarhire.com/customeradmin/register-ac.php" class="noDecor">Register As Customer</a></li><li id="clogout"><a href="../customeradmin/logout.php" class="noDecor">Customer LogOut</a></li><li id="forgetpassword"><a href="../customeradmin/unregistered_user.php" class="noDecor">Forget Password</a></li><li id="aaccount"><a href="https://www.poliscarhire.com/affiliates/affcustomeradminhome.php" class="noDecor">Affiliates Admin Area</a></li><li id="alogin"><a href="https://www.poliscarhire.com/affiliates/login.php" class="noDecor">Affiliates Login</a></li><li id="aregister"><a href="https://www.poliscarhire.com/affiliates/aff-register-ac.php" class="noDecor">Affiliates Registation</a></li><li id="alogout"><a href="../affiliates/logout.php" class="noDecor">Affiliates LogOut</a></li><li id="aforgetpassword"><a href="../affiliates/unregistered_user.php" class="noDecor">Forget Password Affiliates</a></li><li id="adminlogout"><a href="../administration/logout.php" class="noDecor">Admin LogOut</a></li><li id="adminlogin"><a href="https://www.poliscarhire.com/administration/login.php" class="noDecor">Admin Login</a></li></ul></li></ul></div>
    Last edited by djr33; 08-16-2012 at 07:25 AM.

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    okey doke, heres a dropdown menu I just whipped up for you. Pay attention to the structure of the ul's in the html, also, the things that are really down the dropping down are the hover commands in the css.
    Code:
    <html>
    <head>
    <style type="text/css">
    ul {
      font-family: Arial, Verdana;
      font-size: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul li {
      display: block;
      position: relative;
      float: left;
    }
    li ul { display: none; }
    ul li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
      border-top: 1px solid #ffffff;
      padding: 5px 15px 5px 15px;
      background: #2C5463;
      margin-left: 1px;
      white-space: nowrap;
    }
    ul li a:hover { background: #617F8A; }
    li:hover ul {
      display: block;
      position: absolute;
    }
    li:hover li {
      float: none;
      font-size: 11px;
    }
    li:hover a { background: #617F8A; }
    li:hover li a:hover { background: #95A9B1; }
    </style>
    </head>
    <body>
    <ul id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a>
        <ul>
        <li><a href="">The Team</a></li>
        <li><a href="">History</a></li>
        <li><a href="">Vision</a></li>
        </ul>
      </li>
      <li><a href="">Products</a>
        <ul>
        <li><a href="">Cozy Couch</a></li>
        <li><a href="">Great Table</a></li>
        <li><a href="">Small Chair</a></li>
        <li><a href="">Shiny Shelf</a></li>
        <li><a href="">Invisible Nothing</a></li>
        </ul>
      </li>
      <li><a href="">Contact</a>
        <ul>
        <li><a href="">Online</a></li>
        <li><a href="">Right Here</a></li>
        <li><a href="">Somewhere Else</a></li>
        </ul>
      </li>
    </ul>
    </body>
    </html>
    if you need any more help, ask me.
    Bernie
    Last edited by bernie1227; 06-16-2012 at 01:41 AM.

  3. The Following User Says Thank You to bernie1227 For This Useful Post:

    lse123 (06-16-2012)

  4. #3
    Join Date
    Jan 2012
    Posts
    74
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    HTML Code:
    <li style="list-style: none !important; text-align: center !important; height: 30px !important; width: 185px !important; margin-top: 0px !important; margin-right: 5px !important; margin-bottom: 5px !important; position: relative !important; border: 1px solid rgb(204, 204, 204) !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; border-bottom-left-radius: 5px !important; cursor: pointer !important; background-image: -webkit-linear-gradient(bottom, rgb(238, 238, 238), rgb(255, 255, 255)) !important; " id="janrain-facebook" role="button"><img style="background-color: transparent !important; " src="http://cdn.quilt.janrain.com/1.3.10/icons/janrain-provider100/faceb..."></li>
    When try social signup a null spce appear in place of Facebook but in code exist the div... at...
    http://www.poliscarhire.com here that Facebook don't seem if I inspect html code with Chrome dev tools, I am able to see facebook element in code, just below the Dialog on the left/below of dialog...hence is doesn't seem, well must be conflict with my css, can you guess the problem?

  5. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    I'm a little confused about what you are trying to ask here, is the question related to this thread? It may be better for you to start a new thread for this question.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. The Following User Says Thank You to bernie1227 For This Useful Post:

    lse123 (08-18-2012)

  7. #5
    Join Date
    Jan 2012
    Posts
    74
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    effect after added menu:
    when prior modified site and press social icon appeared 6 social network icons incl facebook to sign up with. When added the divs in menu and convert all tables to divs in the whole site, when press social icon appeared 5 only social network icons not facebook,... well in code when the social popup is seem facebook exist, seemed moved a little down from popup, why this?

  8. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Ah, I see what you mean now, However I see all six social network icons, including Facebook.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  9. The Following User Says Thank You to bernie1227 For This Useful Post:

    lse123 (08-18-2012)

  10. #7
    Join Date
    Jan 2012
    Posts
    74
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    what browser you use? NOT meant phone or tablet but desktop...browser?

  11. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    I used safari to test it, what browser do you use? A thought occurred that you could widen the I've with the social icons in it a little bit because it seems that the Facebook Icon is being squeezed down the page.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  12. The Following User Says Thank You to bernie1227 For This Useful Post:

    lse123 (08-18-2012)

  13. #9
    Join Date
    Jan 2012
    Posts
    74
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    I USED DESKTOP WIN PC Safari but only 5 socials appeared at http://www.poliscarhire.com/ the total is 6 as I may see in Android browser phone, or in safari ipad... facebook is missing at chrome, safari, firefox, opera, ie9...in all desktop browsers windows checked only....

  14. #10
    Join Date
    Jan 2012
    Posts
    74
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    in code appear 6 but in view(visible) only 5 socials ...no facebook... this only in desktop browsers....

Bookmarks

Posting Permissions

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