Jump to content
Sign in to follow this  
Hemlock

Css Dropdown Menu

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...