Drop down menu that show new link on 2 columns - css

Question

I am building my website.
I am pretty new to CSS and i have 2 question.
I managed to make a drop down menu which satisfy me. The problem is that:
1)I want the white margin bottom bar when i mouseover a the 1st group of link inside the box instead than outside. I know there is a command to achieve this, but i need to fix width and height which I don't want.
2) I want the second ul element to be showed like a table with 2 column and a title for each column that is a link in bold. I can't understand why each link has it's own box around him even if i use inline.
THis is my HTML:
<div id="menu">
<ul>
<li>Ispirazioni</li>
<li>Chi Siamo
<ul>
<li>La Storia</li>
<li>Oggi</li>
</ul>
</li>
<li>Articoli
<ul>
<li>Articoli in promozione</li>
<li>Catalogo ></li>
</ul>
</li>
<li>Contatti</li>
</ul>
And this is my CSS:
#menu {
clear:both;
width:100%;
height:64px;
text-align: center;
top:40px; /* I want the menu bar follow the scroll*/
position:fixed; /*and it stay 40px from top */
background: rgba(89,89,172,0.7); /*I want the background is transparent*/
}
#menu ul li{
position:relative; /*I want the menu element is displayed in ROW*/
display:inline;
}
#menu ul li a{
text-decoration:none;
display:inline-block; /*menu element is separated by 20px*/
padding:20px;
}
#menu ul ul{
display: none; /*menu is hidden*/
position:absolute; /* position depends from the first ul*/
margin:0;
padding:0;
text-align:left;
}
#menu ul ul li{
display:inline; /*my submenu width*/
width:300px
}
#menu ul ul li a{
width:300px;
padding:2px;
font-size:12px;
}
#menu ul li:hover ul {
display: block;
}
#menu ul li:hover ul a{
text-decoration:none;
background:rgba(89,89,172,0.7);
}
#menu ul li:hover > a{
color:blue;
border-bottom: 10px solid #CCC; /* border bottom, i want inside*/
}
#menu ul li:hover ul a:hover{
color:blue;
border-bottom:none;
}
Sorry if my code is poor but i justy started css.
http://jsfiddle.net/ZjLdK/
Here is a fiddle, the white bar that appear when i mouseover the link is outside the box, and i want it inside. And then i want 2 column with clickable link, not a box for each sublink.
And the background always trasparent
THank you so much!

Answer 1

Is this what you were thinking of having done? css:
ul {
position:fixed;
top:40px;
text-align: center;
display: inline;
margin: 0;
list-style: none;
width:100%;
background: rgba(89,89,172,0.7);}
ul li {
display: inline-block;
margin-right: -4px;
padding:0px;
position: relative;
width:20%;
cursor: pointer;}
ul li:hover {
background: #555;
color: #fff;}
ul li ul {
text-align: left;
display: inline;
margin: 0;
opacity: 0;
width:700px;
position:absolute;
top:100%;
left:0px;
visibility: hidden;
list-style: none;}
ul li ul li {
display: inline-block;
width: 300px;
position: relative;
margin:0;
padding:0;
background: #fff;
cursor: pointer;}
ul li ul li:hover {
background:rgba(89,89,172,0.7); }
ul li:hover ul {
opacity: 1;
visibility: visible;}
html:
<ul>
<li>Ispirazioni</li>
<li>Chi Siamo
<ul>
<li>La Storia</li>
<li>Oggi</li>
</ul>
</li>
<li>Articoli
<ul>
<li>Articoli in promozione</li>
<li>Catalogo ></li>
</ul>
</li>
<li>Contatti</li>
</ul>
And here's the fiddle
http://jsfiddle.net/aNVam/230/