Hemlock Posted July 21, 2009 Share Posted July 21, 2009 Hello lads,A long time ago I made a dropdown menu (vertical dropdown) with CSS off course.I tried applying it in a global line to a relative other idea that lies close to a vertical dropdown menu.Here is my chunk of HTML <ul id="sub"> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','images/btn_media_a.png',1)"><img src="images/btn_media.png" alt="media" name="media" width="134" height="57" border="0" id="media" /></a> <ul> <li> <div class="submenu"> <a href="#">Website developement</a> <span class="submenuwhitespace">| </span><a href="#">Videos</a> <span class="submenuwhitespace">|</span> <a href="#">Business</a> </div> </li> </ul> </li> <li><img src="images/btn_bar.png" width="7" height="57" /> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gamecorner','','images/btn_gamecorner_a.png',1)"><img src="images/btn_gamecorner.png" alt="gamecorner" name="gamecorner" width="228" height="57" border="0" id="gamecorner" /></a> <ul> <li> <div class="submenu"> <a href="#">Warcraft III</a> <span class="submenuwhitespace">| </span><a href="#">Starcraft</a> <span class="submenuwhitespace">|</span> <a href="#">Flash Games</a> </div> </li> </ul> </li> <li><img src="images/btn_bar.png" width="7" height="57" /> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('audio','','images/btn_audio_a.png',0)"><img src="images/btn_audio.png" alt="audio" name="audio" width="134" height="57" border="0" id="audio" /></a> <ul> <li> <div class="submenu"> <a href="#">Naration</a> <span class="submenuwhitespace">| </span><a href="#">SFX</a> <span class="submenuwhitespace">|</span> <a href="#">Instrumental</a><span class="submenuwhitespace">|</span> <a href="#">My Weekly 5</a> </div> </li> </ul> </li> <li><img src="images/btn_bar.png" width="7" height="57" /> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/btn_bio_a.png',1)"><img src="images/btn_bio.png" alt="bio" name="bio" width="221" height="57" border="0" id="bio" /></a> </li></ul> And here is my CSS #sub, #sub ul {padding: 0px;margin: 0px;list-style: none;}#sub a {display: block;}#sub ul a { border: 0 none;}#sub li {float: left;}#sub li ul {position: absolute;width: 696px;left: -2000px;margin: 0px;text-align: left;}#sub li:hover ul, #nav li.sfhover ul {left: auto;}#sub li:hover, #nav li.sfhover{ width: auto;} I choose for a Ul/li combination to make my dropdown, however I am stuck on one little issue (it works) which consists out of 2 minor issues.- href's inside the ul li are aligned vertical, in which case I would like to them to spread out horizontally.- The Ul / Li's appear under each UL, in which I would like them to appear under the first UL, meaning each UL/LI in supposed to start at the entire left.I know it's allot of info but I hope you can find my question in all this.Regards Link to comment Share on other sites More sharing options...
Hemlock Posted July 21, 2009 Author Share Posted July 21, 2009 I manged to fix the second point by removing the block function in the #sub a.Edit: there we go fixed both issues, the first issue was fixed by removing the "auto" in the left function in "#sub li:hover ul, #nav li.sfhover ul {" tagcan be closed by the way this issue. Link to comment Share on other sites More sharing options...
SillyBilly Posted July 22, 2009 Share Posted July 22, 2009 Look at this site for many examples of menus,A List Apart Link to comment Share on other sites More sharing options...
uwspstar Posted July 23, 2009 Share Posted July 23, 2009 check these from w3schoolshttp://www.w3schools.com/css/tryit.asp?fil...e=trycss_float5http://www.w3schools.com/dhtml/tryit.asp?f...trydhtml_menu10 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.