how hide/show submenus_inner ul needed wrapped inside divs

[lse123]

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??


<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>

[bernie1227]

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.


<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

[lse123]

<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?

[bernie1227]

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.

[lse123]

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?

[bernie1227]

Ah, I see what you mean now, However I see all six social network icons, including Facebook.

[lse123]

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

[bernie1227]

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.

[lse123]

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....

[lse123]

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

[bernie1227]

Like I said, I believe the problem is that the div may betwo small to contain all 5 icons, have you tried widening the div in which they are contained?

[lse123]

is a like web service is done auto... may be is the new site of divs in other places a conflict in css... prior that(divs) were html tables appeared 6 socials including facebook(same popup window dim), also in ipad and android browsers appear 6 socials including facebook...well?

[bernie1227]

So the problem is Definately with the styles applied to the divs, which explains why it is displaying correctly on mobile devices as they have different screen sizes and display slightly differently, have you tried actually editing the width of the div they are contained within in CSS?

[lse123]

I think created dynamically as a web service... and conflict with css on horizontal menu?

[bernie1227]

I don't think you understand me, I don't think it is a conflict with the CSS. If it is, I would try putting:


!important

Inside the CSS rules. Eg:


height: 100px !important;

This will overide any other CSS rules for it.

[lse123]

!important; exist for janrain-facebook, and the others, from chrome dev tools, well?
<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>

[bernie1227]

Then it can't be a CSS conflict. Like I said before, try widening the div they are in.

[lse123]

As I see again the code seems in the janrain social popup the each of the two <ul><li>... that has 3 elements (each), go horizontally rather vertically... is it of the horizontal menu bar of <ul><li>... I thing since has 3 items each and the space is 2 col / 3 rows each <ul><li>... must be inner vertical & outer horizontal... can you find the conflict, i am looking now...


<ul><ul><li>...

well?

[lse123]

Problem solved as tested go to implement it...solution:
for menu


ul li {
display: block;
position: relative;
float: left;
}

changed to
#horizontalMenuUlLi li {
display: block;
position: relative;
float: left;
}

this must got conflict: float: left;

[keyboard]

Not meaning to barge into this thread but -

If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.

Also-

Please use the forum's bbcode tags to make your post more readable:

for php code............
<?php /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................

[lse123]

i do not see drop down resolved in edit > go adv... you do it if possible in my behalf...

[keyboard]

Only the creator of the thread and moderators can do it.
You can see it here -

4589

[bernie1227]

you need to edit the original post, and there will be button called advanced, and in there, edit the prefix, to resolved

[lse123]

I can not EDIT post #1... may this is already to resolved, did it before?

[bernie1227]

yes, this is now set to resolved.