How to take horizontal rolling bar from my website?

Asked

Viewed 596 times

0

/*-------Conf.CSS--------*/
body{
    background-color:#FFF;	
}

header{
	background-color:#222;
	width:100%;
	height:78px;
	float:left;
}

.logo{
    width:10.9375%;
	height:66px;
	float:left;
	margin-left:162px;
	margin-top:9px;
}

/*-------Menu--------*/

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 100%;
	margin-left:11.23046875%;
    text-align: left;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}

.nav ul li:hover{
    background-color: #000;
}

.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}

.nav ul li:hover ul{
    display: block;
}

.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}

.nav ul ul li {
    display: block;
}

.nav ul ul li a:hover{
    color: #fff;
}

.img-menu{
	display:none;	
}
<header>
   <div class="logo">
     <a href="index.html"><img src="img/logo.png" width="112" height="60" alt="Meu site" title="Meu site"/></a>
   </div>
</header>

<div class="nav">
 <div class="img-menu"><img src="img/icn-menu.png"/></div>
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a href="#">Animes/desenhos</a>
                    </li>
                    <li><a href="#">Memes</a>
                    </li>
                    <li><a href="#">Histórias bisarras</a>
                    </li>
             </ul>
                <li> <a href="#">TI</a>
                <ul>
                    <li><a href="#">Progamção</a>
                    </li>
                    <li><a href="#">Tutorias</a>
                    </li>
              </ul>
            </li>
        </ul>
    </div>
    
 </div> 

There is an error in the menu of my site that makes the site stick with horizontal rolling bar.

inserir a descrição da imagem aqui

  • 2

    Post your code (css + html), you probably have some element that is exceeding the limits.

  • @Randrade I’ll put !

2 answers

3

Try adding this to your CSS:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

2


In fact, this is happening because Voce has a div with 100% width, and with 11% margin totaling 111%, puts a div inside the menu div with the margin.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.