3 replies [Last post]
phparion
Offline
newbie
Manchester, UK
Last seen: 9 years 44 weeks ago
Manchester, UK
Joined: 2009-01-17
Posts: 6
Points: 0

Hi

I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript.

here is the structure,

<ul id="nav">
										                                            <li  class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
 
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
 
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
                                                                                    <li  class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>

here is my all related css,

external css file,

#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0  0; width:100%;}
 
/* All Levels */
#nav li { text-align:left; }
 
 
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
 
/* 0 Level */
#nav li { clear:both; position:relative;  display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left;  padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
 
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
 
 
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
 
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
 
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
 
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
 
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
 
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
 
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
 
 
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
 
 
#nav ol {  margin-left:5px; margin-bottom:10px;  }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif);  font-size:12px; font-weight:normal;    }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }

inline css code to overwrite the default behavior for target page

ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover  {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
 
ul#nav ol li a { padding:0px;  }
ul#nav ol li  { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol {  border:#ccc 1px solid; padding-bottom:30px;  }

I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem.

In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards.

any help is much appreciated I am really stuck with this.[img][/img]

AttachmentSize
list-problem.gif3.79 KB
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 3 years 45 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

can you provide a link?

can you provide a link?

phparion
Offline
newbie
Manchester, UK
Last seen: 9 years 44 weeks ago
Manchester, UK
Joined: 2009-01-17
Posts: 6
Points: 0

it is on my computer and not

it is on my computer and not online. if you need any further info i can post it.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 6 days ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

phparion wrote:it is on my

phparion wrote:

it is on my computer and not online. if you need any further info i can post it.

All of your HTML and CSS.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph