Hello, I have a few issues with a nav bar.

 

 

http://mylzh.net

 

As you can see, the drop downs appear, but because they're positioned down from the buttons, it disapears by the time you try to use the drop down links. How can I fix this?

 

Also, how would I make the last link have a border-radius? I can't see to get that done either.

 

HTML:

<div id="nav">
<ul id="jsddm">
<li><a href="http://mylzh.net/content.php"><!--BACK UP START-->HOME<!--BACK UP END--></a></li>
<li>
<a href="#">COMMUNITY</a>
<ul>
<li><a href="http://mylzh.net/arcade.php">Arcade</a></li>
<li><a href="http://mylzh.net/content.php?1015">Guides</a></li>
<li><a href="http://mylzh.net/content.php?193-Social-Networks">Social Networks</a></li>
<li><a href="http://mylzh.net/content.php?126-lzhwiki">Lzuruha Wiki</a></li>

<li><a href="http://mylzh.net/content.php?185-Voice-Servers">Voice Servers</a></li>
<li class="last"><a href="http://mylzh.net/content.php?638-Game-Servers">Game Servers</a></li>
</ul>
</li>
<li>
<a>PORTALS</a>
<ul>
<li><a href="http://mylzh.net/content.php?388-battlefield">Battlefield 3</a></li>
<li><a href="http://mylzh.net/content.php?248-cod_news">Call Of Duty: Modern Warfare 3</a></li>
<li><a href="http://mylzh.net/content.php?246-starcraft_2_news">StarCraft II: Heart of the Swarm</a></li>
<li><a href="http://mylzh.net/content.php?249-cs_news">Counter-Strike: Source</a></li>
<li><a href="http://mylzh.net/content.php?341-d3_news">Diablo III</a></li>
<li><a href="http://mylzh.net/content.php?252-lol_news">League Of Legends</a></li>
<li><a href="http://mylzh.net/content.php?387-minecraft_news">MineCraft</a></li>
<li><a href="http://mylzh.net/content.php?250-rift_news">Rift: Planes of Telara</a></li>
<li><a href="http://mylzh.net/content.php?815">Dota 2</a></li>
<li><a href="http://mylzh.net/content.php?614-starwar_news">Star Wars: The Old Republic</a></li>
<li><a href="http://mylzh.net/content.php?247-warcraft_news">World of WarCraft: Mists of Pandaria</a></li>
</ul>
</li>
<li>
<a>TEAM</a>
<ul>
<li><a href="http://mylzh.net/showgroups.php">Staff & Players</a></li>
<li><a href="http://mylzh.net/application-forms.php?appid=1">Apply to the Team</a></li>
 <li><a href="http://mylzh.net/content.php?179-Achievements">Team Achievements</a></li>
 <li><a href="http://mylzh.net/forumdisplay.php?112-Report-a-Player">Report a Player</a></li>
</ul>
</li>
<li class="middle_pusher"><a href="http://mylzh.net/content.php?195-About-Us">ABOUT</a>
<ul>
<li><a href="http://mylzh.net/content.php?182-LzH-in-the-Community">In The Community</a></li>
<li><a href="http://mylzh.net/content.php?181-Sponsors">Sponsors & Partners</a></li>
<li><a href="http://mylzh.net/sendmessage.php">Contact Us</a></li>
<li><a href="http://mylzh.net/content.php?189-Donate">Donate</a></li>
</ul>
</li>
<li>
<a href="http://mylzh.net/competitions.php">EVENTS</a>
<ul>
<li><a href="http://mylzh.net/tournaments.php">Tournaments</a></li>
<li><a href="http://mylzh.net/ladders.php?showonly=leagues">Leagues</a></li>
<li><a href="http://mylzh.net/ladders.php?showonly=ladders">Ladder</a></li>
</ul>
</li>
<li>
<a>LZHTV</a>
<ul>
 <li><a href="http://mylzh.net/content.php?196-Streams">Streams</a></li>
 <li><a href="http://mylzh.net/media.php">Video on Demand </a></li>
</ul>
</li>
<li>
<a>LZHCLUB</a>
<ul>
 <li><a href="http://mylzh.net/forumdisplay.php?128-LzH-Club-Room">Club Forums</a></li>
 <li><a href="http://mylzh.net/forumdisplay.php?130-LzH-Club-Download-Video">Club Videos</a></li>
</ul>
</li>
<li><a href="http://mylzh.net/content.php?187-Store">STORE</a></li>
<li><a href="http://mylzh.net/forum.php">FORUMS</a></li>
</ul>
</div>

 

 

CSS:

#jsddm {
margin: 0;
padding: 0;
height: 1em; }
#jsddm li {
list-style: none;
float: left; }
#jsddm li.middle_pusher {
padding-right:260px;}
#jsddm li a {
display: block;
padding: 3px 8px;
color: #fff;
font-size:20px;
text-decoration: none;
padding-right:15px;
text-shadow:1px 1px black;}
#jsddm li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #FFF;
position:relative;
top:39px;
}
#jsddm li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#jsddm li:hover li, #navbar li.hover li {
float: none; }
#jsddm li:hover li a, #navbar li.hover li a {
background-color: #FFF;
border-bottom: 1px solid #fff;
color: #000; }
#jsddm li li a:hover {
background-color: #8db3ff; }
#jsddm li ul li a {
font-size:16px;
text-shadow:none !important;
}
#jsddm li ul li.last{
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

Edited August 19, 201213 yr by LukeeeeBennett

I've found it quite difficult to get rid of that problem, that's why I use a pure CSS menu from here http://www.cssplay.co.uk/menus/ which I know will work.

 

To cure the problem of the space between the top level and the dropdown level that causes the mouse to lose contact, first get rid of all top and bottom padding, top and bottom margins to the "a" styles as well as the li styles and possibly make line-height equal to the font-size. Your menu will look terrible but it should work. Then add padding or margins and keep testing until it breaks again, then go back one step and try again.

 

Sometimes a negative top margin on the drop down level will help to drag it up over the top level a little bit.

 

Edit: the main problem is top: 39px in #jsddm li ul { } editing that to 31px on the hover helps but I'm not sure if it totally cures the problem.

#jsddm li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #FFF;
position:relative;	
top: 0;/*39px;*/
}
#jsddm li:hover ul, #navbar li.hover ul {
display: block;		 top: 31px; /*added*/
position: absolute;
margin: -5px 0 0 0; /*0;*/
padding: 0;
}

The link works if you drag the mouse quickly, but it's not perfect.

Edited August 19, 201213 yr by Wickham

Aye, I've noticed the same thing. Quite an annoying problem. I really want to keep it in the current position. Hmmmmm.

I found a fix. I added a padding-bottom to the top <li>.