登录 | 注册 | FAQ
Anonymous

Menu acordion

+ 发表回复

2 篇帖子 分页: 1 / 1


Menu acordion

kklo » 周日 10月 13, 2013 2:12 am

Ola

Estou com um probleminha no CSS e não consigo resolver:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

/* START:Top Menu
*********************************************************************************/
#top-menu {
margin: 15px 0 0 0;
position: relative;
z-index: 1;
}
#top-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-menu ul li {
float: left;
}
#top-menu ul li a {
font-family: proxima_novasemibold, Arial;
font-size: 17px;
padding: 11px 18px;
color: white;
text-decoration: none;
text-shadow: 0 -1px 0 #0b3751;
-webkit-transition: background 0.5s ease, color 0.3s ease;
transition: background 0.5s ease, color 0.3s ease;
}
#top-menu ul li:hover > a {
background: #265668;
border: 1px solid #30677b;
border-radius: 4px;
-webkit-border-radius: 4px;
padding: 10px 17px;
color: #bbecff;
}

/********************************************************************************/
/* START Drop Down Menu
******************************************************************/
#top-menu li ul {
min-width: 200px;
position: absolute;
margin: 8px 0 0 1px;
opacity: 0;
visibility: hidden;
transition: visibility 0s linear 0.5s,opacity 0.5s linear;
z-index: 12;
}
#top-menu li ul li {
background: #204d5e;
min-width: 212px;
clear: both;
padding: 5px 10px;
border-bottom: 1px solid #bbecff;
}
#top-menu li ul li a {
color: white;
font-size: 14px;
padding: 5px;
}
#top-menu li ul li:hover a {
background: none !important;
border: 0 !important;
padding: 5px !important;
}
#top-menu ul li:hover ul,
#top-menu li li:hover ul,
#top-menu li li li:hover ul {
opacity: 1;
overflow: hidden;
visibility: visible;
transition-delay: 0s;
}
#top-menu li ul li:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* END Drop Down Menu
******************************************************************/

/********************************************************************************/
/* START Drop Down Menu - 3 nivel
******************************************************************/
#top-menu li ul li ul {
min-width: 200px;
position: relative;
margin: 0px 0 0 150px;
opacity: 0;
/*visibility: hidden;
transition: visibility 0s linear 0.5s,opacity 0.5s linear;
z-index: 12;
padding: 10px;
}
#top-menu li ul li li ul li{
background: #204d5e;
min-width: 312px;
clear: both;
padding: 15px 50px;
border-bottom: 1px solid #bbecff;
}
#top-menu li ul li a {
color: white;
font-size: 14px;
padding: 5px;
}
#top-menu li ul li:hover a {
background: none !important;
border: 0 !important;
padding: 5px !important;
}
#top-menu ul li:hover ul,
#top-menu li li:hover ul,
#top-menu li li li:hover ul {
opacity: 1;
overflow: hidden;
visibility: visible;
transition-delay: 0s;
}
#top-menu li ul li:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* END Drop Down Menu
******************************************************************/
</style>
</head>

<body>
<div id="top-menu">
<ul>
<li><a href="#">Home</a></li>

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</a></li>

<li><a href="#">Item 3</a>
<ul>

<li id="dropDown"><a href="#">Item 3.1</a></li>

<li id="dropDown"><a href="#">Item 3.2</a></li>
</ul>
</li>

<li><a href="#">Item 4</a>
<ul>

<li id="dropDown"><a href="#">Item 4.1</a>
<ul>
<li id="dropDown"><a href="#">Item 4.1.1</a>
<ul>
<li id="dropDown"><a href="#">Item 4.1.1.1</a>
<ul>
<li id="dropDown2"><a href="#">Item 4.1.1.1.1</a></li>
<li id="dropDown2"><a href="#">Item 4.1.1.1.2</a></li>
</ul>
</li>
</ul>

<li id="dropDown2"><a href="#">Item 4.1.2</a>
<ul>
<li id="dropDown2"><a href="#">Item 4.1.2.1</a></li>
<li id="dropDown2"><a href="#">Item 4.1.2.2</a></li>
</ul>
</li>

<li id="dropDown"><a href="#">Item 4.1.3</a></li>

</li>
</ul>
</li>
</ul>
</li>

<li><a href="#">Item 5</a></li>

<li><a href="#">Item 6</a></li>

<li><a href="#">Item 7</a></li>

</ul>


</div>
<div class="clr"></div>
<ul>

</body>
</html>


Estou tentando inserir mais niveis em um menu de template.

O START:Top Menu e START Drop Down Menu, são originais do template, não posso mexer para evitar desconfigurar o restante. O nivel 3 é um teste, e estou tentando fazer mas não consigo.

O sub-menu do item 4, fica muito junto e não consegui arrumar, já tentei varias coisas e não consegui.

Alguém poderia me ajudar?

Obrigado
kklo
头像

kklo

  • 帖子: 4
  • 注册: 周三 4月 03, 2013 7:28 pm

Re: Menu acordion

XainPro » 周三 10月 16, 2013 10:11 am

para o menu multi level tentar isso
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1