Hola tengo un problema con el menú CSS a ver si me pueden ayudar, mi problema es que tengo un menú horizontal, i uno de los menús tiene muchos submenús que sobrepasan toda la parte horizontal..
en definitiva que quedo limitado por el espacio horizontal del submenús, i me gustaría saber si puedo duplicar la línea horizontal solo en los menús que tengan muchos submenús.
adjunto el codigo fuente
muchas gracias
<div id="menuSup">
<div id="menu">
<ul id="primer">
<li>
<h1><a href="#">Menu 1</a></h1>
<ul>
<li><a href="#" runat="server" title="title">submenu 1</a></li>
<li><a href="#" runat="server" title="title2">submenu 2</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h1><a href="#">menu 2</a></h1>
<ul>
<li><a href="#" title="#">submenu 1</a></li>
</ul>
</li>
</ul>
</div>
</div>
#menu ul
{
height: 34px;
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menu a, #menu h1
{
font:Arial, Helvetica, sans-serif;
font-size:10px;
display: block;
padding:0;
margin:0;
}
#menu h1
{
color: #fff;
text-transform: uppercase;
}
#menu a
{
color: #fff;
text-decoration: none;
padding:12px 8px 10px 8px;
}
#menu a:hover
{
color:#333;
background:#FC0 url(../Fitxers/Imatges/fons_menu_on.gif) repeat-x;
}
#menu ul ul a
{
font:Arial, Helvetica, sans-serif;
font-size:11px;
display:block;
color: #333;
text-decoration: none;
padding:6px 10px 8px 10px;
font-weight:bold;
}
#menu ul ul a:hover
{
color:#333;
text-decoration: underline;
background:none;
font-weight:bold;
}
#menu li
{
position: relative;
border-right:#000 1px solid;
list-style:none;
float:left;
}
#menu ul ul ul {
position: absolute;
left: 100%;
}
#menu ul ul
{
height:25px;
background-color:#ffcc00;
width:950px;
position:absolute;
margin-right:auto;
margin-left:auto;
float:right;
z-index: 500;
}
#menu ul ul li
{
position: relative;
border:0;
list-style:none;
float:left;
}
div#menu ul ul
{
display: none;
}
div#menu ul li:hover ul
{
display: block;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
display: none;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
display: block;
}
div#menu1
{
position:relative;
left:0;
}