[PROBLEMA] Creare un menù di 3° livello in orizzontale
Posted: Fri Jul 11, 2008 12:36 pm
salve a tutti, ho un grosso problema 
, nel sito che sto sviluppando ho il menù principale in orizzontale, alcune voci del suddetto hanno dei sottomenù verticali, alcune voci dei sottomenù devono avere a loro volta un sottomenù, che però vorrei fosse in orizzontale e vorrei che apparisse di fianco alle suddette voci, il problema è che non riesco a dare float alle voci del sotto-sottomenù, non mi prende gli stili sia che imposti il in float sia che impost l' .
So di essere stato poco chiaro per questo farò un piccolo schema con a seguito il css del menù
HomeGallery [con sottomenu]Forum
voce1_sottomenu1 ->link1_sotto-sottomenu |link2_sotto-sottomenu
voce2_sottomenu1
voce3_sottomenu1
, nel sito che sto sviluppando ho il menù principale in orizzontale, alcune voci del suddetto hanno dei sottomenù verticali, alcune voci dei sottomenù devono avere a loro volta un sottomenù, che però vorrei fosse in orizzontale e vorrei che apparisse di fianco alle suddette voci, il problema è che non riesco a dare float alle voci del sotto-sottomenù, non mi prende gli stili sia che imposti il in float sia che impost l' . So di essere stato poco chiaro per questo farò un piccolo schema
con a seguito il css del menùHomeGallery [con sottomenu]Forum
voce1_sottomenu1 ->link1_sotto-sottomenu |link2_sotto-sottomenu
voce2_sottomenu1
voce3_sottomenu1
Code: Select all
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
#menu_vert {
margin-left: 0px;
margin-right: 0px;
}
/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
/* Fix for Opera 8 */
/*overflow: hidden; */
background:transparent;
border-bottom: 0px solid #fdbe01;
width: 100%;
margin-top: -1px;
margin-left: 0px;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
/* Unless you know what you do, do not touch this */
#primary-nav{
border-bottom: 1px solid #0f7f11;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
background:transparent url(uploads/images/menu-ul-bg.png) repeat-x top left;
height:35px;
}
#primary-nav, #primary-nav ul {
list-style: none;
margin-right: -2px;
padding: 0;
float:left;
width:100%;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
text-align:center;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: 0px;
float: left;
height:100%;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float:none;
position: relative;
width: 135px;
}
#primary-nav a {
display: block;
margin: 0px;
text-decoration: none;
color: #0f7f11;
font-weight:900;
}
#primary-nav li a {
background:transparent;
width:135px;
text-align:center;
font-size:1em;
padding: 5px 10px;
height:25%;
}
#primary-nav li a:hover {
font-size:1.3em;
}
#primary-nav li.menuparent{
background:transparent url(uploads/images/submenu-closed.png) no-repeat 5px 20px;
}
#primary-nav li.menuparent:hover{background:transparent;}
#primary-nav li.menuparent a.menuparent {
width:120px;
text-align:center;
padding: 5px 10px;
border-bottom: 1px solid #000;
font-size:1em;
}
#primary-nav li.menuparent a.menuparent:hover {
font-size:1.3em;
}
#primary-nav li li a {
border-left: 0px solid #ff9000;
border-right: 0px solid #ff9000;
margin-left:0px;
font-size:1em;
width:135px;
color: #0f7f11;
font-weight:400;
text-align:center;
padding: 5px 0px;
}
#primary-nav li.menuparent ul,
#primary-nav li.menuactive ul{
width:132px;
border-top:1px solid #000;
background:transparent url(uploads/images/submenu-bg-bottom.png) no-repeat bottom left;
margin-left:3px;
margin-top:0px;
padding-bottom:21px;
}
#primary-nav li.menuparent li a:link,
#primary-nav li.menuparent li a:visited,
#primary-nav li.menuparent li a:hover{
background:transparent url(uploads/images/submenu-bg.png) repeat-y top left;
border-right: 0px solid #ff9000;
border-left: 0px solid #ff9000;
}
#primary-nav li.menuparent ul li.menuparent{
background:transparent;
}
#primary-nav li.menuparent ul li.menuparent ul,
#primary-nav li.menuactive ul li.menuparent ul{
width:132px;
border-top:0px solid #000;
background:transparent url(uploads/images/submenu-bg-bottom.png) no-repeat bottom left;
margin-left:0px;
padding-bottom:34px;
}
#primary-nav li.menuparent ul li ul li a:link,
#primary-nav li.menuparent ul li ul li a:visited,
#primary-nav li.menuparent ul li ul li a:hover{
background:transparent url(uploads/images/submenu-bg.png) repeat-y top left;
border-right: 0px solid #ff9000;
border-left: 0px solid #ff9000;
border-bottom:0px solid #000;
}
#primary-nav li.menuparent ul li.menuparent a.menuparent,
#primary-nav li.menuactive ul li.menuparent a.menuparent{
border-bottom:0px solid #000;
}
#primary-nav li.menuparent ul li.menuparent ul li a:link,
#primary-nav li.menuparent ul li.menuparent ul li a:visited,
#primary-nav li.menuactive ul li.menuparent ul li a:link,
#primary-nav li.menuactive ul li.menuparent ul li a:visited{
text-align:center;
width:135px;
float:left;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive a{
background:transparent url(uploads/images/menu-ul-bg.png) repeat-x top left;
border-right: 0px solid #ff9000;
border-left: 0px solid #ff9000;
}
#primary-nav li.menuactive li a:link,
#primary-nav li.menuactive li a:visited,
#primary-nav li.menuactive li a:hover{
background:transparent url(uploads/images/submenu-bg.png) repeat-y top left;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul{
display: block;
}
#primary-nav ul li:hover ul{
border:0;
margin:-23px 0 0 112px;
padding-left:14px;
padding-right:14px;
padding-bottom:0px;
display:block;
width:auto;
background:transparent url(images/cms/submenu3-left-bg.png) no-repeat top right;
}
#primary-nav ul li:hover ul li a:link,
#primary-nav ul li:hover ul li a:visited{
background:transparent url(uploads/images/submenu-bg.png) repeat-x top left;
float:left;
width:75px;
height:28px;
text-align:right;
font-size:1.0em;
padding-top:8px;
}
#primary-nav ul li:hover ul li a:hover{
font-size:1.2em;
background:transparent url(images/cms/submenu3-hover-bg.png) repeat-x top left;
height:28px;
text-align:right;
}
#primary-nav ul li:hover ul li {
background:transparent;
display:block;
height:28px;
margin:0;
}
/* IE Hacks */
#primary-nav li li {
float: left;
}
#primary-nav li li a {
height: 1%;
}