menu a tendina

[silvia87]

salve a tutti, sono una new entry e ahimè mi serve già il vostro aiuto.
Sono alle prese con un menù a tendina verticale composto da dei sotto menù, ma con quest'ultimi riscontro dei problemi, in quanto nn si allineano alla rispettiva parola ma schizzano in alto. qualcuno può aiutarmi?grazie

[MicheleWT]

posta il codice html + css e eventuale javascript

[silvia87]

ciaooo ecco qui. grazie infinite

/* ########################## header content ########################### */

#header form
{

}

#header form .button
{
font-weight:bold;
margin: 0;
cursorointer;
text-align:center;
text-transform:uppercase
}

#header form .inputbox
{

width:13em;
padding:3px;
}
#header {width:1020px !important; margin:0 auto; height:149px; text-align:left}
#header form .inputbox { margin: 2px 13px 2px 2px;}
#header form .inputbox:focus { margin: 1px 11px 0 1px; }

#header ul.menu
{
display:block;
text-align:left;
list-style-type:none;
background:url(../images/main_menu_bg.gif) no-repeat 0 0;
padding:2px 0 0 10px;
width:1008px;
height:49px;
position:absolute;
top:98px;
}
#header ul.menu li {float:left; list-style:none; background:url(../images/spacer.gif) no-repeat 0% 0; border:none; padding:2px 0px 0 2px}
#header ul.menu li:first-child {background:none;}
#header ul.menu ul {display:none; top:50px; position:absolute; background:#fff; padding:14px 0}
#header ul.menu li a {display:block ; font-size:16px; color:#000; font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:14px 0 20px ; width:165px; text-align:center; text-decoration:none }
#header ul.menu li a:hover {color:#fff; background:url(../images/hover_bg.gif) repeat-x 0 0; }
#header ul.menu li.current > a {color:#fff; background:url(../images/hover_bg.gif) repeat-x 0 0; }
#header .menu > li.active > a {color:#fff !important; background:url(../images/hover_bg.gif) repeat-x 0 0; }
#header .menu > li > ul li.current a:hover { color:#ee9d01 !important; background:url(../images/hover_bg.gif) repeat-x 0 0 !important; }
#header ul.menu li.current a.first {color:#fff; background:url(../images/first_bg.gif) no-repeat 0 0; }
#header ul.menu li.current a.last {color:#fff; background:url(../images/last_bg.gif) no-repeat 100% 0; }
#header ul.menu li a.first:hover {color:#fff; background:url(../images/first_bg.gif) no-repeat 0 0; }
#header ul.menu li a.last:hover {color:#fff; background:url(../images/last_bg.gif) no-repeat 100% 0; }
#header ul.menu ul ul { margin-left:96%; top:-16px }
#header ul.menu ul li {display:block; float:none; background:none; position:relative}
#header ul.menu ul li a {display:block ; padding:0 0 0 20px; color:#7a7a7a; font-weight:bold; line-height:22px; text-align:left; font-size:12px; }
#header ul.menu ul li a:hover {display:block ; padding:0 0 0 20px; color:#ee9d01; font-weight:bold; background:none }

.menu_sub {list-style:none;}
.menu_sub li {float:left; margin-left:10px; padding-left:10px; background:url(../images/sub_menu_spacer.gif) no-repeat 0 3px; line-height:14px}
.menu_sub li:first-child {float:left; margin-left:0px; padding-left:0px; background:none}
.menu_sub li a {color:#ee9d01; font-weight:bold; font-size:12px !important; line-height:15px}
.menu_sub li a:hover {text-decoration:none;}


#content_bg {background:url(../images/all_bg.png) repeat-y 0 0; width:1020px; margin:0 auto; padding:20px 0}
.main #content_bg {background:none; width:1020px; margin:0 auto; padding:0 !important}
.bottom_corner{background:url(../images/bottom_corner.png) no-repeat 0 0; width:1020px; margin:0 auto; height:25px;}
.main .bottom_corner {display:none}

body {background:#eeeff1 url(../images/main_bg.gif) repeat-x 0 0; }


.main_custom_block {background:url(../images/main_block_bg.png) no-repeat 0 0; width:1020px; margin:0 auto; height:532px; position:relative}
.articles_block {position:absolute; top:373px; left:35px;}
.col1, .col2, .col3 { float:left; margin-right:40px}
.col1 {width:290px}
.col2 {width:290px}
.col3 {width:290px}

.col3 {margin-right:0}

/* ########################## breadcrumbs ########################### */

#breadcrumbs
{
padding:0 0 0 0px;
text-align:left;
margin:15px 20px 15px 0px;
}

#breadcrumbs p
{
padding:5px;
display:inline;
}

#breadcrumbs span
{
padding:0px;
}

#breadcrumbs span a:link,
#breadcrumbs span a:visited
{
text-transform:none;
font-weight:normal
}

#breadcrumbs span a:hover,
#breadcrumbs span a:active,
#breadcrumbs span a:focus
{
text-decoration:none;
}


/* ########################## navigation column ########################### */

#nav ul
{
list-style-type:none;
margin:0px 0;
}

.module_content
{
margin:0px 0 0px 0;
padding:0px 0px 10px 5px
}

.moduletable
{
margin:0px 0 20px 0;
padding:0px 0;
width:100%;
overflow:hidden
}

.moduletable_menu
{
margin:0px 0 10px 0;
}

.moduletable_js
{
margin-bottom:5px;
}

#nav h3.js_heading,
#right h3.js_heading
{
position:relative;
display:block;
padding:5px 0px 0 0px ;
margin:0px ;
}

h3.js_heading span.backh
{
padding:4px 0px 0px 10px;
display:block;
}

h3.js_heading span.backh1
{
padding:0px 20px 8px 0px;
display:block;
}

h3.js_heading a
{
display:block;
position:absolute ;
right:0px ;
top:0px;
padding:5px 5px 0 0;
text-decoration:none;
}

.no
{
font-size:1px;
}

#nav h3
{
margin:5px 0 6px 0;
font-weight:normal;
line-height:1.19em
}


#nav h3 span.backh3
{
padding:0px 0px 5px 2px;
display:block;
}


/* ++++++++++++++ first level ++++++++++++++ */

#nav .moduletable-example ul.menu
{
margin:0;
padding:0
}

ul.menu
{
list-style-type:none ;
margin:0 0 0px 0px ;
padding: 0px 5px 20px 5px;

}

.module_content ul.menu
{
margin-left:-5px;
padding:10px 0 0 0 ;
}

ul.menu li
{
margin:0;
}


ul.menu li.active a:link,
ul.menu li.active a:visited
{
font-weight:bold;
}

ul.menu li a:hover,
ul.menu li a:active,
ul li a:focus
{

}



/* ++++++++++++++ second level ++++++++++++++ */
ul.menu li ul
{
margin:0 ;
padding:0 ;
}
ul.menu li ul li
{
margin:0;
padding:0
}

ul.menu li.active ul li a:link,
ul.menu li.active ul li a:visited
{
padding:5px 10px 5px 20px ;
font-weight:normal;
}


ul.menu li.active ul li a.active:link,
ul.menu li.active ul li a.active:visited
{
padding:7px 10px 7px 20px ;
}

ul li.active ul li.active a:link,
ul li.active ul li.active a:visited
{
font-weight:bold ;
}

/* ++++++++++++++ third level ++++++++++++++ */

ul.menu li ul li ul
{
padding:5px 0 5px 0px;
}

ul.menu li ul li ul li
{

}

ul.menu li.active ul li.active ul li a:link,
ul.menu li.active ul li.active ul li a:visited
{
padding:5px 4px 5px 30px;
font-weight:normal;
}

ul.menu li.active ul li.active ul li.active a:link,
ul.menu li.active ul li.active ul li.active a:visited
{
font-weight:bold;
}



/* ########################## main ########################### */

/* ++++++++++++++ main general ++++++++++++++ */

#main h1
{

padding: 5px;
font-weight:normal;
margin:0 -5px 10px -5px

}


#main h2 a
{
text-decoration:none;
}

#main h3
{
margin:20px 0 10px;
}

.item
{
padding:0px 5px 10px 5px;
display:block
}

.item h2
{
margin:0 0px 10px 0px
}

.item-page
{
padding:0 5px;
display:block;
overflow:hidden
}


/* h1 on frontpage and blog view */

#main .blog-featured h1,
#main .blog h1
{

margin:0 0px 10px 0px
}


.blog .category-desc
{
padding:0 5px;
margin:10px 0 25px
}

.blog .cat-children .category-desc
{
padding:0 0px;
margin:10px 0 25px
}


#main .items-row h2
{
font-weight:normal;
padding:5px 2px 5px 2px;
}
#main ul.subcategories
{
margin:20px 20px 20px 10px
}
#main .subcategories-link
{
font-weight:bold
}

#main ul
{
list-style-positionutside;
list-style-type:square;
padding:0 0 0 15px;
margin:10px 0 10px 0px;
}

#main ol
{
padding:0 0 0 20px;
margin:10px 0 10px 0px;
list-style-positionutside
}

#main ul li,
#main ol li
{
padding:0;
margin: 0;
}

#main .category-list
{
padding:0 5px;
display:block;
}

#main .category-list h1
{
margin-left:-5px;
margin-right:-5px;
}

.categories-list
{
padding:0 5px
}

#main .categories-list ul
{
margin:0px 0 0 20px;
padding:0
}

#main .categories-list ul li
{
padding: 5px;
}

#main .categories-list ul ul
{
margin-left:15px
}

.category-desc
{
margin:10px 0;
padding-left:0px
}

.small
{
}

.image-left
{
float:left;
margin:0 15px 5px 0;


}

.image-right
{
float:right;
margin:0 0 5px 15px
}

.archive
{
padding:0 5px
}

.archive form
{
padding:0 5px
}

ul#archive-items
{
margin:20px 0 20px 0px;
list-style-type:none;
padding:0
}

ul#archive-items li.row0,
ul#archive-items li.row1
{
padding:10px 0;
margin:10px 0;
}

[MicheleWT]

questo è solo css, ma vista la mole ti conviene postare un link a un esempio funzionante.

[silvia87]

grazie michele, ecco qui http://79.50.4.17/ questo è il menu, spero tu mi possa aiutare

[MicheleWT]

purtroppo i menu via software e non a mano portano a queste cose, è difficile capire senza sbattercisi sopra per un pò.

comunque nei sotto menu compare
<ul style="display:block">

prova a dare a quei div position:absolute; o position:relative;

è che i css del tema sono molti e non si capisce al volo in quale sono contenute le regole del menu.

[silvia87]

Michele ho provato ad inserire dove c'è il display block ad inserire prima il relative e poi l'absolute. sostituendolo qui
#header > #head > .main_menu > ul.menu
{
display:block;
text-align:left;
list-style-type:none;
padding:0;
position:relative;
top:170px;
left:0;
background: url(../images/line_bg.png) no-repeat 0% 0%;
}
mi succede questo http://79.50.4.17/

[silvia87]

nessuno riesci ad aiutarmi?

[MicheleWT]

mi spiace, troppo codice fatto via software, mi ci vorrebbe mezza giornata per capirci qualcosa

[silvia87]

ok grazie