Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GrayScale

Sub menus.

Por , em Desenvolvimento frontend

Recommended Posts

GrayScale    0

GrayScale
Postado

Bem acho que estou na área certa, pelo que sei sub menus é feito de css, então. Tava precisando dessa ferramente pra um site aqui, tenho esse sub menu baixado por um site, mais não está valendo a pena editá-lo. éeer, é um menu drop down.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é a mesma coisa. Basta então não dar float nos LI do submenu.

 

Tente fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

baixei um mais o problema que ele tá cortando as imagens, peguem o code dele e me digam aonde aumentar. tá no css, ele tá cortando a linha pra do fundo, reparem só. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo: CSS Dropdown menu sem JavaScript ou hacks</title>
<style type="text/css">
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	color: #666;
	background-color: #006633;
	margin-left: 20px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}

a, a:hover, a:active, a:focus {
	outline:0; 
	direction:ltr;
}
 
.wrapper {
	position:relative; height:25px;
}
	
.mainmenu {
	position:absolute; 
	z-index:100;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:normal;
	font-size:90%;
	line-height:25px;
	left:50%; 
	margin-left:-303px; 
	width:606px;
}

ul.menu {
	padding:0; 
	margin:0; 
	list-style:none; 
	width:100px; 
	overflow:hidden; 
	float:left; 
	margin-right:1px;
}

ul.menu a {
	background:#369;
	text-decoration:none; 
	color:#fff; 
	padding-left:5px;
}
 
ul.menu li.list {
	float:left;
	width:250px;
	margin:-32767px -125px 0px 0px;
	background:url(images/top1.png) no-repeat left bottom;
}

ul.menu li.list a.category {
	position:relative;
	z-index:50;
	display:block;
	float:left;
	width:120px;
	margin-top:32767px;
	background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
	margin-right:1px;
	background-image:url(images/tophover1.png);
	background-repeat:no-repeat;
	background-position:left top;

}

ul.submenu {
	float:left; 
	padding:25px 0px 0px 0px; 
	margin:0; 
	list-style:none; 
	background-image:url(images/tophover1.png);
	background-repeat:no-repeat;
	background-position:left top;
	margin:-25px 0px 0px 0px;
}
	
ul.submenu li a {
	float:left;
	width:120px;
	background:#fff;
	clear:left;
	color:#fff;
}

ul.submenu li a.endlist {
	background:url(images/bottom1.png);
}
 
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
	background:url(images/bottomhover1.png);
}
 
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
	background:#ccc;
	margin-right:1px;
	color:#fff;
}
.title {
       font-family:Verdana, Arial, Helvetica, sans-serif;
	   font-size:10px;
	   color:#000000;
	   }
	   
</style>
</head>

<body>

<div class="wrapper">

    <div class="mainmenu">
        <ul class="menu">
        <li class="list"><a class="category" href="#Home">Home</a></li>
        </ul>
        <ul class="menu">
            <li class="list">
                <a class="category" href="#about">About Us</a>
                <ul class="submenu">
                    <li><a href="#about1"><div class="title">About link 1</div></a></li>
                    <li><a href="#about2"><div class="title">About link 2</div></a></li>
                    <li><a href="#about3"><div class="title">About link 3</div></a></li>
                    <li><a href="http://www.google.com"><div class="title">About link 4</div></a></li>
                    <li><a class="endlist" href="#about5"><div class="title">About link 5</div></a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="list">
                <a class="category" href="#articles">Articles</a>
                <ul class="submenu">
                    <li><a href="#articles1">Articles link 1</a></li>
                    <li><a href="#articles2">Articles link 2</a></li>
                    <li><a href="#articles3">Articles link 3</a></li>
                    <li><a class="endlist" href="#articles4">Articles link 4</a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="list">
                <a class="category" href="#news">News</a>
                <ul class="submenu">
                    <li><a href="#news1">News link 1</a></li>
                    <li><a href="#news2">News link 2</a></li>
                    <li><a class="endlist" href="#news3">News link 3</a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="list"><a class="category" href="#donate">Donate</a></li>
        </ul>
        <ul class="menu">
            <li class="list"><a class="category" href="#contact">Contact</a></li>
        </ul>
    </div>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GrayScale    0

GrayScale
Postado

Evandro

Cara, eu não pego arquivos e dou para os outros arrumarem. E os edito até a parte que eu sei e posso arrumar, há coisas que eu ainda não aprendi. Nunca fiz aulas de html e nada, tudo aprendido na internet fica mais difícil, eu postei aqui porque o sub menu está em uma layer pequena que eu não consigo aumentar, já aumentei widht de várias boxes enao consigui, por isso eu posto no fórum para me ajudarem. Bem eu pensei que esse fórum fosse para ajudar aos que precisam de ajuda, se tiver eu estiver enganado me avise. E também não obrigo ninguem a me ajudar, eu ficava de visitante e via os caras ajudando os outros e eu passando aperto com alguns erros que não conseguia resolvê-los, por isso me uni ao fórum, para me ajudarem com o que ainda não aprendi.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hum.. tem um link ? veja que não temos as imagens aqui.. fica dificil ajudar sem ver o problema ocorrendo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito