Ashok, thanks. the relative positioning of the containing element is something i did not know about. it works now. it is not quite obvious to me that in order for absolute positioning to work the container needs to be relatively positioned.
btw, setting top:100% seems more general than top:20px cheers konstantin On Jul 29, 8:22 pm, Ashok Prajapati <[email protected]> wrote: > Hello akonsu, > > please try this > > <html> > <head> > <title></title> > <style type="text/css"> > #m ul, li > { > margin: 0px; > padding: 0px; > } > #m li > { > float: left; > display: inline; > list-style-type: none; position:relative; > } > #m li li > { > display: block; > list-style-type: none; > float: none; > } > #m ul ul > { > position: absolute; left:0; top:20px; > } > </style> > </head> > <body> > <div id="m"> > <ul> > <li><span>____item1____</span> > <ul> > <li>subitem11</li> > <li>subitem12</li> > <li>subitem13</li> > </ul> > </li> > <li><span>____item2____</span> > <ul> > <li>subitem21</li> > <li>subitem22</li> > <li>subitem23</li> > </ul> > </li> > <li>item3</li> > </ul> > </div> > </body> > </html> > > Thanks > > On 29 July 2010 20:21, akonsu <[email protected]> wrote: > > > > > hello, > > > i am trying to style list of lists to create a menu. i want the top > > level menu to be horizontal, and the second level sub-menus to be > > vertical and positioned under their parents. > > > i set the margin and padding on sub-lists to 0, and in FF it does what > > i want, but ie7 still shows the sub-lists in the wrong location. > > > please help. > > > konstantin > > > my markup: > > > <html> > > <head> > > <title></title> > > <style type="text/css"> > > #m ul, li > > { > > margin: 0px; > > padding: 0px; > > } > > #m li > > { > > float: left; > > display: inline; > > list-style-type: none; > > } > > #m li li > > { > > display: block; > > list-style-type: none; > > float: none; > > } > > #m ul ul > > { > > position: absolute; > > } > > </style> > > </head> > > <body> > > <div id="m"> > > <ul> > > <li><span>____item1____</span> > > <ul> > > <li>subitem11</li> > > <li>subitem12</li> > > <li>subitem13</li> > > </ul> > > </li> > > <li><span>____item2____</span> > > <ul> > > <li>subitem21</li> > > <li>subitem22</li> > > <li>subitem23</li> > > </ul> > > </li> > > <li>item3</li> > > </ul> > > </div> > > </body> > > </html> > > > -- > > -- > > You received this because you are subscribed to the "Design the Web with > > CSS" at Google groups. > > To post: [email protected] > > To unsubscribe: [email protected] > > -- > || Ashok Prajapati | web Designer || > || E-mail:- [email protected] || > || M-ID :- yahoo: ashok_11122 > ||http://www.onlycssmenu.com||http://www.css3maker.com|| -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
