I suspect that part of the problem is that the line in the list item is longer than the containing element and so the line is wrapping at a space in the string.
hello,
You're right.
when the line in the list item is longer than width of div tag, style of the list items is broken.
I'll send you some parts of css file and html file.
Css is followed by:
[HTML]/* othermenu */
div#othermenu div.module div div div {
padding: 10px 15px 15px 15px;
}
div#othermenu ul {
padding: 0px;
margin: 0px;
width: 158px;
overflow: hidden;
list-style: decimal-leading-zero;
background: #f5f5f5;
}
div#othermenu li {
display: block;
}
div#othermenu li a{
height: 25px;
display: ;
line-height: 25px;
text-decoration: none;
color: #646464;
}
div#othermenu li span {
height: 25px;
display: block;
line-height: 25px;
text-decoration: none;
color: #646464;
}
div#othermenu a:link, div#othermenu a:visited {
color: #646464;
}
div#othermenu li#current a {
font-weight: bold;
}
div#othermenu li#current li a {
font-weight: normal;
}
div#othermenu li a:hover, div#othermenu li span:hover, div#othermenu li span.sfhover {
color: #000000;
}
div#othermenu li.level1 {
background: #f5f5f5 url(../images/othermenu_level2_item.png) 0 0 no-repeat;
}
div#othermenu li.level1 a, div#othermenu li.level1 span {
padding: 0px 0px 0px 10px;
}
div#othermenu li.parent {
background: #f5f5f5 url(../images/othermenu_level2_item_parent.png) 0 0 no-repeat;
}
div#othermenu li.parent span {
cursor: pointer;
}
div#othermenu li.active, div#othermenu li.active:hover {
background-color: #969696;
}
div#othermenu li.active a, div#othermenu li.active span, div#othermenu li.active a:hover {
color: #ffffff;
}
#left div#othermenu li.level1 ul, div#othermenu li.level1 li, #left div#othermenu li.level1 li.active {
background: #ffffff;
}
#left div#othermenu li.level1 li a:hover, #left div#othermenu li.level1 li.active a:hover {
color: #000000;
}
#left div#othermenu li.level2 a {
background: url(../images/othermenu_level3_item_bg.png) 10px 2px no-repeat;
padding: 0px 0px 0px 30px;
width: 128px;
color: #646464;
height: 20px;
line-height: 20px;
}
#left div#othermenu li.level2 a:hover {
background: #ffffaa url(../images/othermenu_level3_item_bg.png) 10px 2px no-repeat;
}
#left div#othermenu li.level3 a {
background: url(../images/othermenu_level4_item_bg.png) 20px 2px no-repeat;
padding: 0px 0px 0px 40px;
width: 118px;
}
#left div#othermenu li.level3 a:hover {
background: #ffffaa url(../images/othermenu_level4_item_bg.png) 20px 2px no-repeat;
}
#left div#othermenu li.level4 a {
background: url(../images/othermenu_level5_item_bg.png) 30px 2px no-repeat;
padding: 0px 0px 0px 50px;
width: 108px;
}
#left div#othermenu li.level4 a:hover {
background: #ffffaa url(../images/othermenu_level5_item_bg.png) 30px 2px no-repeat;
}
Menu structure is followed by:
<div id="middle">
<div class="background layoutleft">
<div id="left">
<div id="left_container" class="clearingfix">
<div id="othermenu">
<div class="module"><div><div><div>
<ul class="othermenu">
<li class="level1 item9 parent toggler"><span >Maklumat Korporat</span><ul class="othermenu accordion">
<li class="level2 item1"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 12&Itemid=86">Perutusan Menteri</a></li>
<li class="level2 item12"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 13&Itemid=80">Perutusan KSU</a></li>
<li class="level2 item13"><a href="http://localhost/kkdn/#">Teraju Utama</a></li>
<li class="level2 item14"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 14&Itemid=81">Visi & Misi</a></li>
<li class="level2 item15"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 15&Itemid=82">Fungsi / Obkjektif</a></li>
<li class="level2 item16"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 16&Itemid=83">Piagam Pelanggan</a></li>
<li class="level2 item17"><a href="http://localhost/kkdn/#">Lagu KKDN</a></li>
<li class="level2 item18"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 18&Itemid=85">Carta Organisasi KKDN</a></li>
<li class="level2 item19"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 17&Itemid=84">Akta KKDN</a></li>
<li class="level2 item20"><a href="http://localhost/kkdn/#">Bahagian</a></li>
<li class="level2 item21"><a href="http://localhost/kkdn/index.php?option=com_content&task=view&id= 5&Itemid=78">test</a></li>
</ul>
</li>[/HTML]
7
