Форум Сайтостроение Веб-строительство

помогите переделать выпадающий список

A
На сайте с 16.03.2014
Offline
3
anonimvasil
922

прошу помощи у знатоков css, нужно переделать имеющийся список с горизонтального на вертикальный, чтобы подменю выпадали вправо, ниже прилагаю код, заранее благодарен за любую помощь 


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">



<style type="text/css">



.nav{

width:1000px;

height:40px;

padding:0;

background:url(../images/navi.png) no-repeat;

margin-bottom:10px;

}



.nav ul{

font-size:14px;

list-style:none;

margin:0;

display:inline;

width:730px;

float:left;

}



.nav li { 

float: left;

position: relative;

z-index:100;

text-align:left;

height:40px;

}



.nav li a {

font-size: 14px;

font-weight:bold;

color:#black;

line-height:20px;

padding:10px;

display: block;

text-decoration:none;

border-right:1px solid #ff8e8e;

text-shadow:0 1px 1px rgba(0,0,0,0.5);

}



.nav li a:hover {

z-index:100;

color:#fff;

text-decoration:none;

background:#505050 url(../images/grey.png) repeat-x;

text-shadow:none;

}



.nav li.drop:hover .link1{

background:#505050 url(../images/grey.png) repeat-x;

}



.nav li.drop{

position:relative;

display:block;

}



.nav li.drop:hover{



}



.nav li a.first{

border-radius:3px 0 0 3px;

-webkit-border-radius:3px 0 0 3px;

-moz-border-radius:3px 0 0 3px;	

}



.nav li ul {

z-index:500;

display: none;

position:absolute;

width:auto;

height:auto;

background:#303030;

margin:0;

border-bottom:2px solid #ff3c3c;

}



.nav li li{

z-index:500;

margin:0;

position:relative;

clear:both;

height:25px;

border-top:1px solid #202020;

}



.nav li li a {

/*min-width:130px;*/

min-width:140px;

padding:0 10px;

clear:both;

text-align:left;

color:#fff;

font-weight:normal;

font-size:12px;

line-height:25px;

text-decoration:none;

text-shadow:none;

border-radius:0;

-webkit-border-radius:0;

-moz-border-radius:0;

height:25px;

border-right:none;

}



.nav li li a:hover {

color:#fff;

background:#ff3c3c;

text-shadow:none;

clear:both;

}



.nav li:hover ul{

display:block;

clear:both;

}



</style>

</head>









<body>

<div class="nav">

                <ul>

				<li><a href="#">меню</a></li>

				<li class="drop"><a href="/#/">меню1</a>

				<ul>

				<li><a href="/#/">категория1</a></li>

				<li><a href="/#/">категория2</a></li>

				<li><a href="/#/">категория3</a></li>

				<li><a href="/#/">категория4</a></li>

				<li><a href="/#/">категория5</a></li>

				</ul>

				<li><a href="/#/">меню2</a></li>

				<li class="drop"><a href="/#/">меню3</a>

				<ul>

				<li><a href="/#/">категория1</a></li>

				<li><a href="/#/">категория2</a></li>

				<li><a href="/#/">категория3</a></li>

				<li><a href="/#/">категория4</a></li>

				<li><a href="/#/">категория5</a></li>

				</ul>

				</ul>

				</div>



</body>

</html>

визуальный пример в архиве

zip exemple.zip
Р
На сайте с 07.02.2013
Offline
178
рецидивист
#1

Держи) 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">



<style type="text/css">



.nav{

width:1000px;

height:40px;

padding:0;

background:url(../images/navi.png) no-repeat;

margin-bottom:10px;

}

.nav ul{

font-size:14px;

list-style:none;

margin:0;

display:inline;

width:730px;

float:left;

}

.nav li

{ 

position: relative;

z-index:100;

text-align:left;

height:40px;

width: 100px;

}

.nav li a

{

font-size: 14px;

font-weight:bold;

color:#black;

line-height:20px;

padding:10px;

display: block;

text-decoration:none;

text-shadow:0 1px 1px rgba(0,0,0,0.5);

}

.nav li a:hover {

z-index:100;

color:#fff;

text-decoration:none;

background:#505050 url(../images/grey.png) repeat-x;

text-shadow:none;

}

.nav li a.link1:hover{

	}

.nav li.drop:hover .link1{

background:#505050 url(../images/grey.png) repeat-x;

}

.nav li.drop{



	position:relative;

	display:block;

}

.nav li.drop:hover{



}

.nav li a.first{

border-radius:3px 0 0 3px;

-webkit-border-radius:3px 0 0 3px;

-moz-border-radius:3px 0 0 3px;	

}

.nav li ul {

z-index:500;

display: none;

position:absolute;



width:auto;

height:auto;

background:#303030;

margin:0;

border-bottom:2px solid #ff3c3c;

}

.nav li li{

	z-index:500;

margin:0;

position:relative;

clear:both;

height:25px;

border-top:1px solid #202020;

}

.nav li li a {

/*min-width:130px;*/

min-width:140px;

padding:0 10px;

clear:both;

text-align:left;

color:#fff;

font-weight:normal;

font-size:12px;

line-height:25px;

text-decoration:none;

text-shadow:none;

border-radius:0;

-webkit-border-radius:0;

-moz-border-radius:0;

	height:25px;



border-right:none;

}

.nav li li a:hover {

color:#fff;

background:#ff3c3c;

text-shadow:none;

clear:both;

}

.nav li:hover ul{

display:block;

clear:both;

position: absolute;left:100px; top:0;

}



</style>

</head>









<body>

<div class="nav">

                <ul>

				<li><a href="#">ìåíþ</a></li>

				<li class="drop"><a href="/#/">ìåíþ1</a>

				<ul>

				<li><a href="/#/">êàòåãîðèÿ1</a></li>

				<li><a href="/#/">êàòåãîðèÿ2</a></li>

				<li><a href="/#/">êàòåãîðèÿ3</a></li>

				<li><a href="/#/">êàòåãîðèÿ4</a></li>

				<li><a href="/#/">êàòåãîðèÿ5</a></li>

				</ul>

				<li><a href="/#/">ìåíþ2</a></li>

				<li class="drop"><a href="/#/">ìåíþ3</a>

				<ul>

				<li><a href="/#/">êàòåãîðèÿ1</a></li>

				<li><a href="/#/">êàòåãîðèÿ2</a></li>

				<li><a href="/#/">êàòåãîðèÿ3</a></li>

				<li><a href="/#/">êàòåãîðèÿ4</a></li>

				<li><a href="/#/">êàòåãîðèÿ5</a></li>

				</ul>

				</ul>

				</div>



</body>

</html>
A
На сайте с 16.03.2014
Offline
3
anonimvasil
#2

рецидивист, спасибо!)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий