19-10-2011, 15:05
Witam. dopiero raczkuję w temacie budowy stron WWW.
Stworzyłem sobie od podstaw stronkę z rozwijanym menu po lewej stronie. Wszystko działa OK ale chciałbym lekko zaokrąglić rogi pokazane w załączniku.
bez tytułu.JPG (Rozmiar: 25.39 KB / Pobrań: 11)
Mam taki kod stworzony dla tego menu:
<title>Menu rozwijane pionowe - demo</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#menu li {list-style: none;}
#menu, #menu ul {width: 160px;}
#menu ul {position: absolute; top: 0; left: 140px; width: 0; height: 30px; overflow: hidden; padding-left: 21px; background: url('grafika/strz.gif') 0 6px no-repeat;
}
#menu li {padding-bottom: 2px; line-height: 1; position: relative;}
#menu li:hover ul {width: 160px; height: auto;}
#menu a, #menu li:hover li a {display: block; font: 13px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; width: 140px; color: #F2D769; background-color: #ED3156;}
#menu li:hover a, #menu li:hover li:hover a {background-color: #2f54ed;}
</style>
</head>
<body>
<div id="glowny">
<div id="NAGLOWEK"></div>
<div id="MENU">
<ul id="menu">
<li><a href="#">
Strona główna</a>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
</ul>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Link 4.1</a></li>
<li><a href="#">Link 4.2</a></li>
<li><a href="#">Link 4.3</a></li>
</ul>
<li><a href="#">Link 5</a>
<ul>
<li><a href="#">Link 5.1</a></li>
<li><a href="#">Link 5.2</a></li>
<li><a href="#">Link 5.3</a></li>
</ul>
</li>
<li><a href="#">Link 6</a>
<ul>
<li><a href="#">Link 6.1</a></li>
<li><a href="#">Link 6.2</a></li>
<li><a href="#">Link 6.3</a></li>
</ul>
</li>
<li><a href="#">Link 7</a>
<ul>
<li><a href="#">Link 7.1</a></li>
<li><a href="#">Link 7.2</a></li>
<li><a href="#">Link 7.3</a></li>
</ul>
</li>
</li>
</li>
</ul>
</div>
Co trzeba zrobić by móc otrzymać takie zmiany?
Stworzyłem sobie od podstaw stronkę z rozwijanym menu po lewej stronie. Wszystko działa OK ale chciałbym lekko zaokrąglić rogi pokazane w załączniku.
bez tytułu.JPG (Rozmiar: 25.39 KB / Pobrań: 11)
Mam taki kod stworzony dla tego menu:
<title>Menu rozwijane pionowe - demo</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#menu li {list-style: none;}
#menu, #menu ul {width: 160px;}
#menu ul {position: absolute; top: 0; left: 140px; width: 0; height: 30px; overflow: hidden; padding-left: 21px; background: url('grafika/strz.gif') 0 6px no-repeat;
}
#menu li {padding-bottom: 2px; line-height: 1; position: relative;}
#menu li:hover ul {width: 160px; height: auto;}
#menu a, #menu li:hover li a {display: block; font: 13px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; width: 140px; color: #F2D769; background-color: #ED3156;}
#menu li:hover a, #menu li:hover li:hover a {background-color: #2f54ed;}
</style>
</head>
<body>
<div id="glowny">
<div id="NAGLOWEK"></div>
<div id="MENU">
<ul id="menu">
<li><a href="#">
Strona główna</a>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
</ul>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Link 4.1</a></li>
<li><a href="#">Link 4.2</a></li>
<li><a href="#">Link 4.3</a></li>
</ul>
<li><a href="#">Link 5</a>
<ul>
<li><a href="#">Link 5.1</a></li>
<li><a href="#">Link 5.2</a></li>
<li><a href="#">Link 5.3</a></li>
</ul>
</li>
<li><a href="#">Link 6</a>
<ul>
<li><a href="#">Link 6.1</a></li>
<li><a href="#">Link 6.2</a></li>
<li><a href="#">Link 6.3</a></li>
</ul>
</li>
<li><a href="#">Link 7</a>
<ul>
<li><a href="#">Link 7.1</a></li>
<li><a href="#">Link 7.2</a></li>
<li><a href="#">Link 7.3</a></li>
</ul>
</li>
</li>
</li>
</ul>
</div>
Co trzeba zrobić by móc otrzymać takie zmiany?
