Меню. Блоки разных размеров. Проблема

[eelijah]

Всем доброго времени суток!
Сделал раскрывающееся горизонтальное меню.
Но не удается изменить ширину и высоту подменю. Текст, картинка заднего фона и др параметры остаются те ми же что и на первом уровне.
вот собственно код:
html

<div id="menu">
            <ul>
                <li><a href="">меню 1</a>
                    <ul>
                        <li><a href="">подменю submenu</a></li>
                         <li><a href="">подменю submenu</a></li>
                    </ul>
                </li>
                <li><a href="">меню 2</a></li>
                <li><a href="">меню 3</a></li>
                <li><a href="">меню 4</a></li>
                	<li><a href="">меню 5</a>
                	<ul>
                        <li><a href="">подменю submenu</a></li>
                         <li><a href="">подменю submenu</a></li>
                          <li><a href="">подменю submenu</a></li>
                           <li><a href="">подменю submenu</a></li>
                    </ul>
                    </li>
                <li><a href="">меню 6</a></li>
            </ul>
        </div>

css

#menu {
	margin: 0;
	padding: 0;
}

div#menu ul{
	margin: 0;
	padding: 0;	
}
div#menu ul li {
	float: left;
	width: 100px;
	height: 50px;
	list-style-type: none;
}
div#menu ul li a{
	display: block;
	width: 100px;
	height: 50px;
	color: #c5c5c5;
	font-size: 12pt;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-align: center;
	padding:15px 0 0 0;
	margin:0;
	position:absolute;
}

#menu ul li a:hover{
	color:  #FFF;
	text-decoration: none;
	background: url(Dsg/hoverImg.jpg);
	position:absolute;
}

/* 2nd Menu */
#menu ul li ul{
	display: none;
	
}

#menu ul li:hover ul{
	display: block;
	position: absolute;
	top: 50px;
	margin: 0;
	padding:0;
	width: 150px;
	height: 30px;
	color: #c5c5c5;
	font-size: 12pt;
	font-family:Arial, Helvetica, sans-serif;
	z-index:1;
	background-color:#9F3;
	background-image: none;
}

 

[Jackito]

Посмотри может поможет и еще ну и наконец

 

[ScripT]

Всем доброго времени суток!
Сделал раскрывающееся горизонтальное меню.
Но не удается изменить ширину и высоту подменю. Текст, картинка заднего фона и др параметры остаются те ми же что и на первом уровне.
вот собственно код:
html

<div id="menu">
            <ul>
                <li><a href="">меню 1</a>
                    <ul>
                        <li><a href="">подменю submenu</a></li>
                         <li><a href="">подменю submenu</a></li>
                    </ul>
                </li>
                <li><a href="">меню 2</a></li>
                <li><a href="">меню 3</a></li>
                <li><a href="">меню 4</a></li>
                 <li><a href="">меню 5</a>
                 <ul>
                        <li><a href="">подменю submenu</a></li>
                         <li><a href="">подменю submenu</a></li>
                          <li><a href="">подменю submenu</a></li>
                           <li><a href="">подменю submenu</a></li>
                    </ul>
                    </li>
                <li><a href="">меню 6</a></li>
            </ul>
        </div>

css

#menu {
 margin: 0;
 padding: 0;
}

div#menu ul{
 margin: 0;
 padding: 0; 
}
div#menu ul li {
 float: left;
 width: 100px;
 height: 50px;
 list-style-type: none;
}
div#menu ul li a{
 display: block;
 width: 100px;
 height: 50px;
 color: #c5c5c5;
 font-size: 12pt;
 font-family:Arial, Helvetica, sans-serif;
 text-decoration: none;
 text-align: center;
 padding:15px 0 0 0;
 margin:0;
 position:absolute;
}

#menu ul li a:hover{
 color:  #FFF;
 text-decoration: none;
 background: url(Dsg/hoverImg.jpg);
 position:absolute;
}

/* 2nd Menu */
#menu ul li ul{
 display: none;
 
}

#menu ul li:hover ul{
 display: block;
 position: absolute;
 top: 50px;
 margin: 0;
 padding:0;
 width: 150px;
 height: 30px;
 color: #c5c5c5;
 font-size: 12pt;
 font-family:Arial, Helvetica, sans-serif;
 z-index:1;
 background-color:#9F3;
 background-image: none;
}

если не разобрался то примени класы или ид к нужным тегам.и через них делай что надо.

 

[ALEXu]

#menu ul li:hover ul{
        display: block;
        position: absolute;
        top: 50px;
        margin: 0;
        padding:0;
        width: 150px;
        height: 30px;
        color: #c5c5c5;
        font-size: 12pt;
        font-family:Arial, Helvetica, sans-serif;
        z-index:1;
        background-color:#9F3;
        background-image: none;
}

Сами же указываете высота 30px;
уберите height

 

[ScripT]

Пример:
Html
<li id="one">
<li id="two">
CSS
#one{width:20px;
height:10px;
background:blue;}
#two{height:15px;
background:red;}
вроде так, точно не помню)