Dropdown navigation causing problems.

**X-Tream** · 03-13-2013, 11:16 AM

Hi,

My dropdown navigation (http://netti-tv.net/Teema/) is causing my web-site a problem with smaller screens. As you can see from this image (http://netti-tv.net/Teema/horizontal.jpg), you get a horizontal scroll at the bottom of the screen and when you move it the whole layout gets messed up. If you look at the site with a bigger screen (22 inch - should be enough) the site looks just like it should. With out the horizontal scroll.

index.html

HTML Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Etusivu</title>
 
<link rel="stylesheet" type="text/css" href="tyyli.css" />
<script type="text/javascript">
image1=new Image();image1.src="kuvat/kaikki.png";
</script>
</head> 
 
<body> 
<div id="yla"></div>
<div id="main"> 
 
<div id="logo"></div> 

<div id="menu">
	<div class="nav11"><a href="/">Etusivu</a></div>
	<div class="nav1"><a href="/yle">Yle</a></div>
	<div class="nav1"><a href="/katsomo">Katsomo</a></div> 
	<ul class="dropdown"><li><div class="nav7"><a href="/ruutu">Ruutu</a></div>
	<ul>
	<div id="siirto">
	<li><a href="/nelonen">Nelonen</a></li>
    <li><a href="/jim">Jim</a></li>
    <li><a href="/liv">Liv</a></li>
	</div>
	</ul>
	</li>
	</ul>
	<ul class="dropdown"><li><div class="nav7"><a href="#">Muuta</a></div>
	<ul>
	<li><a href="/iltasanomat">Ilta-Sanomat</a></li>
    <li><a href="/moontv">MoonTv</a></li>
    <li><a href="/aluetv">AlueTv</a></li>
	</ul>
	</li>
	</ul>
	</div> 

<div id="viiva"></div>
</div>
</body> 
</html>

style.css / (tyyli.css)

Code:

*{margin:0;padding:0;}
#main{width:1000px;margin:0 auto;}
body{background:#f6f6f6 repeat-x;background-repeat:repeat;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666666;}
#hr{background:url('kuvat/kaikki.png') 0 -2px;height:1px;}
#yla{clear:both;margin:0auto;height:30px;width:100%;background:url('kuvat/yla.png') repeat-x;}
#logo{height:53px;background:url('kuvat/logo.png') no-repeat;width:276px;margin-left:50px;margin-top:45px;}
#menu{width:800px;margin-left:502px;}
#siirto{margin-left: -40px;}
#siirto2{margin-left: -240px;}
.nav1 a{color:#191919;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;}
.nav1 a:hover{color:#ff7200;}
.nav7 a{color:#191919;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;padding-bottom:7px;}
.nav7 a:hover{color:#ff7200;}
.nav11 a{color:#ff7200;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;}
.nav77 a{color:#ff7200;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;padding-bottom:7px;}
ul{list-style:none;}
ul li{position:relative;}
li ul{display:none;}
ul li a{display:block;text-decoration:none;color:black;margin-left:1px;white-space:nowrap;}
li:hover ul{margin-left:241px;margin-top:25px;display:block;position:absolute;}
li:hover li{padding:10px 15px 5px 15px;float:left;font-family:Tahoma;font-size:13px;border-top:1px solid #ff7200;background-color:#f6f6f6;}
li:hover li a:hover{color:#ff7200;}
#viiva{margin-top:25px;height:1px;width:1000px;background:url('kuvat/kaikki.png') 0 0;}

I have noticed that the problem is in the padding-bottom command, but I have no idea how to fix this problem. If I delete the padding-bottom the dropdown navigation will not work...

Here you can get all of the files:
http://netti-tv.net/Teema/Teema.zip

What should I change from the .css to remove the horizontal scroll for good?

Sorry for my bad English. I would really appreciate if somebody could help me out.

**Beverleyh** · 03-13-2013, 06:48 PM

I think the issue is with this;

Code:

#menu{width:800px;margin-left:502px;}

Your #main div wrapper is only 1000px wide but the #menu within it is occupying 1302px width (width + margin) so its expanding the boundary. Remove the width:800px; and that should fix things.