nicht angemeldet
Css Menü Anpassen: Transparenz Und Runde Recken
Hallo zusammen,
verwende ein CSS basiertes Script für ein Dropdown-Menü und möchte dieses nun an das neue Design der Seite anpassen. Dazu möchte ich gerne die Untermenüs transparent machen und mit runden Ecken versehen. Kennt sich hier jemand entsprechend gut mit CSS aus und kann mich auf die entsprechenden Änderungen hinweisen, die ich vornehmen muss?
Hier mal das Script:
.preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}
#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span,
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}
#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}
#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}
#nav :hover ul.sub
{left:1px; top:38px; background: #a5a4a9; padding:10px; border:1px solid #FFFFFF; white-space:nowrap; width:150px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:auto; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:14px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px solid #a5a4a9;}
#nav li ul.sub li a.fly
{background:#a5a4a9 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover
{background:#fec009; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#fec009 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav li b {display:block; font-size:13px; font-weight:bold; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#444444; cursor:default;}
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:10px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #a5a4a9; padding:10px; border:1px solid #FFFFFF; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover > ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#FFFFFF;}
#nav li:hover li:hover > li a.fly
{background:#a5a4a9 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#FFFFFF;}
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>START</span></a></li>
<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">ARTIKEL</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>Cameras</b></li>
<li><a href="#nogo3" class="fly">nach NAME<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo7" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="#nogo8">Wide Angle</a></li>
<li><a href="#nogo9">Standard</a></li>
<li><a href="#nogo15">Mirror</a></li>
<li><a href="#nogo10">Telephoto</a></li>
<li><b>Zoom</b></li>
<li><a href="#nogo12">35mm to 125mm</a></li>
<li><a href="#nogo13">50mm to 250mm</a></li>
<li><a href="#nogo14">125mm to 500mm</a></li>
<li><b>Non standard</b></li>
<li><a href="#nogo17">Bayonet mount</a></li>
<li><a href="#nogo18">Screw mount</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><b>Accessories</b></li>
<li><a href="#nogo19">Flash Guns</a></li>
<li><a href="#nogo20">Tripods</a></li>
<li><a href="#nogo21">Filters</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#nogo23">Printing</a></li>
<li><a href="#nogo24">Photo Framing</a></li>
<li><a href="#nogo25">Retouching</a></li>
<li><a href="#nogo26">Archiving</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#nogo28">Support</a></li>
<li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><b>European</b></li>
<li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><b>City</b></li>
<li><a href="#nogo35">London</a></li>
<li><a href="#nogo36">Liverpool</a></li>
<li><a href="#nogo37">Glasgow</a></li>
<li><a href="#nogo38" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><b>District</b></li>
<li><a href="#nogo39">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
<li><b>Worldwide</b></li>
<li><a href="#nogo30">USA</a></li>
<li><a href="#nogo31">Canadian</a></li>
<li><a href="#nogo32">South American</a></li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
Hier mal noch fix eine Vorschau von dem Menü - vielleicht kann man es sich dann besser vorstellen: http://www.gamepals.de/temp/menutest2/pro_drop6.html
-
hallo,
Kennt sich hier jemand entsprechend gut mit CSS aus
Öhm ... vermutlich gibt es da einige, ja ;-)
und kann mich auf die entsprechenden Änderungen hinweisen, die ich vornehmen muss?
Vielleicht erstmal zur Einstimmng ein Artikel: http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm
Hier mal das Script:
Es wirkt etwas verworren - und außerdem hast du noch ein gutes Stück HTML angehängt.
Hier mal noch fix eine Vorschau von dem Menü - vielleicht kann man es sich dann besser vorstellen:
http://www.gamepals.de/temp/menutest2/pro_drop6.htmlDas ist wesentlich wichtiger als "geposteter" Code ...
Grüße aus Berlin
Christoph S.
PS: "Runde Recken" sind natürlich auch etwas sehr Imposantes.