PDA

View Full Version : Resolved Trying to make a dropdown menu



BarrMan
Jul 17th, 2009, 01:47 PM
Hey,
I tried making a dropdown menu using javascript for auto positioning the subnav and I had many problems with it (IE), then someone pointed me that it's not the right way to do it and showed me a link to a page which was exactly the kind of dropdown I needed. The only problem is that there's no explanation to the page he sent me and when I tried to duplicate it, it didn't come out right.

Here's the page he sent me:
http://www.tjkdesign.com/articles/ne...wn/default.asp

And here's the page that doesn't work for me:
www.imri-tech.net/califa/index.php

What I couldn't imitate is the float with width for the LIs because I needed my LIs to be able to have different widths that are adjusted according to the content inside. Is there a way to do that? I used display:inline with text-align:right to imitate it. I guess that doesn't work.

Here are the relevant codes:


/*CSS*/
ul,li{padding:0;margin:0;}
ul#NavBar{width:50em;float:right;position:relative;top:0.15em;text-align:right;}
ul#NavBar li.Marked
{
color:#750707;
background-color:#750707;
padding-left:0.5em;
padding-right:0.5em;
padding-bottom:0.5em;
}
ul#NavBar li
{
line-height:1.4em;
display:inline;
font-size:0.75em;
color:#750707;
font-weight:bold;
text-align:right;
direction:rtl;
list-style-type:none;
margin-left:0.3em;
margin-right:0.3em;
}
ul#NavBar li ul
{
background-color:#750707;
height:1.343em;
position:absolute;
top:2.08em;
text-align:right;
}
ul#NavBar li ul li
{
font-size:0.75em;
color:#fdfdf1;
text-align:right;
direction:rtl;
margin-left:1em;
display:inline;
list-style-type:none;
height:1.6em;
line-height:1.7em;
}
ul#NavBar li.bullet
{
background-image:url(images/redbullet.jpg);
background-repeat:no-repeat;
width:0.45em;
height:0.45em;
margin-top:0.7em;
position:relative;
top:0.5em;
width:0.45em;
}

ul#NavBar li ul li.bullet
{
background-image:url(images/bullet.jpg);
background-repeat:no-repeat;
margin-top:0.45em;
margin-left:1em;
margin-right:1em;
width:0.45em;
}


<!--HTML-->
<ul id="NavBar">
<li style="margin-right:0.7em;list-style-type:none;">דף הבית</li>
<li class="bullet">&nbsp;</li>
<li>אודות</li>
<li class="bullet">&nbsp;</li>
<li class="Marked" id="oMarked"><span style="color:#fdfdf1;">ריהוט</span>
<ul>
<li>שולחנות</li>
<li class="bullet"></li>
<li>כסאות</li>
<li class="bullet"></li>
<li>כורסאות - הדומים</li>
<li class="bullet"></li>
<li>ספות - מיטות - ספסלים</li>
<li class="bullet"></li>
<li>שידות - תיבות - מדפים</li>
</ul>
</li>
<li class="bullet">&nbsp;</li>
<li>ברים</li>
<li class="bullet">&nbsp;</li>
<li>אביזרים</li>
<li class="bullet">&nbsp;</li>
<li>עיצוב/צביעה אומנותית</li>
<li class="bullet">&nbsp;</li>
<li>תאורה</li>
<li class="bullet">&nbsp;</li>
<li>חדשות</li>
</ul>

Thanks a lot for any help.

abduraooft
Jul 17th, 2009, 01:55 PM
Try
ul#NavBar li ul {
background-color:#750707;
height:1.343em;
left:-9999px;
position:absolute;
text-align:right;
top:2.08em;
}
#NavBar li:hover ul {
left:auto;
}

BarrMan
Jul 17th, 2009, 02:02 PM
Thanks for the reply!

I don't need it to be triggered by mouseover, I want it to permanently stay there. Also, tried replacing my code with your code but the subnav remained at the same place. (3-4 ems to the left).

BarrMan
Jul 17th, 2009, 11:45 PM
bump.

DaiLaughing
Jul 18th, 2009, 10:17 AM
float:left should do it. It should not matter what width the LIs are as they will float until their container is full.

BarrMan
Jul 18th, 2009, 01:21 PM
Tried that, done that. Already fixed the problem, I decided to go with javascript in the end to auto adjust the subnav location.