Jump to content

Css Dropdown Menu


Hemlock
 Share

Recommended Posts

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

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.

Edited by Hemlock
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...