Salve a tutti, ho un problema con un menu CSS che ho trovato su internet e che e ho deciso di editare.
Il menu è di tipo orrizzontale dropdown via JavaScript.
Ho deciso di spostare il menu centrando le voci al centro pagina editando il css del menu in questo modo:

(In grassetto ciò che ho editato)
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative; Left: 40% ;
display: inline;
float: left;
}
L'effetto è il seguente visualizzabile in questa pagina: LINK

Il problema è che quando ci si dispone sopra il menu per far scorrere giu il SubMenu,
il SubMenu si dispone ad una distanza dall'inizio della voce del menu principale.

Questo è il menu con codice originale: LINK

Parte di testo non editata (in grassetto):

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative; Left: 0 ;
display: inline;
float: left;
}
Vi posto ora il codice completo dei 2 CSS e dell'HTML:

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="Board_CSS/style.css"
type="text/css" media="screen">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css"
href="Data_Files/ddsmoothmenu.css">
<link rel="stylesheet" type="text/css"
href="Data_Files/ddsmoothmenu-v.css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="Data_Files/ddsmoothmenu.js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
</head>
<body>


<span style="font-weight: bold;">







</span>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>[*]<span style="font-weight: normal;"><span
style="font-weight: bold;"> </span></span>[*]<a href="">Folder
0</a>
<ul>[*]Sub Item 1.1[*]Sub Item 1.2[*]Sub Item 1.3[*]Sub Item 1.4[*]Sub Item 1.2[*]Sub Item 1.3[*]Sub Item 1.4[/list]
[*]Folder 1
<ul>[*]Sub Item 1.1[*]Sub Item 1.2[*]Sub Item 1.3[*]Sub Item 1.4[*]Sub Item 1.2[*]Sub Item 1.3[*]Sub Item 1.4[/list]
[*]Item 3[*]Folder 2
<ul>[*]Sub Item 2.1[*]Folder 2.1
<ul>[*]Sub Item 2.1.1[*]Sub Item 2.1.2[*]Folder 3.1.1
<ul>[*]Sub Item 3.1.1.1[*]Sub Item 3.1.1.2[*]Sub Item 3.1.1.3[*]Sub Item 3.1.1.4[*]Sub Item 3.1.1.5[/list]
[*]Sub Item 2.1.4[/list]
[/list]
[*]<a href="http://www.dynamicdrive.com/style/">Item
4</a>[/list]
<br style="clear: left;">
</div>


<p align="center"><iframe src="index_home.html"
frameborder="0" height="1054" scrolling="no"
width="1054">&amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;Egrave;
richiesto un
browser che supporti iFrame.
</iframe></p>
</body>
</html>
CSS del ddsmoothmenu.css ALTERATA (Illustro la parte da me modificata in grassetto)


.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative; left: 40%;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 10px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 7px;
right: 5px;
}
CSS del ddsmoothmenu-v.css (altro CSS da includere nel menu):


.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
}

.ddsmoothmenu-v ul li{
position: relative;
}

/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #414141; /*background of menu items (default state)*/
color: white;
}


.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu-v ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}


/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
Codice Javascript scaricabile qui: LINK (Troppi caratteri nel topic)

Sito da dove l'ho scaricato: LINK

Ho bisogno di ottenere il menu con le voci del submenu centrate alle voci del menu principale.

Vi prego, spero che mi aiutate. Ne ho davvero bisogno.

Un caloroso ringraziamento


Federico