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]
Attachment | Size |
---|---|
list-problem.gif | 3.79 KB |
can you provide a link?
can you provide a link?
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.
phparion wrote:it is on my
it is on my computer and not online. if you need any further info i can post it.
All of your HTML and CSS.