|
|
|
|
| |
Hello World Forum - test css oleck61
(108 Posts bisher) | | | Quellcode: | | <title>CSS DropDown Menu</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Keep the http-equiv meta tag for IE8 --><br />
<meta http-equiv="X-UA-Compatible" content="IE=8"> <!-- Link the CSS file here --> <style type="text/css" media="screen,projection">@charset "utf-8";<br />
/* CSS Document */<br />
<br />
<br />
body {<br />
background-color: #000000;<br />
<br />
/* for pull-down menu to work in IE6*/<br />
behavior:url("csshover2.htc");<br />
<br />
}<br />
<br />
/* pull-down mainmenu css */<br />
.mainmenu{<br />
float: left;<br />
width: 100%;<br />
padding: 0;<br />
}<br />
.mainmenu ul {<br />
float: left;<br />
width: 100%;<br />
list-style: none;<br />
line-height: 1;<br />
color:#FFFFFF;<br />
background: #222222;<br />
padding: 0;<br />
border: solid #800000;<br />
border-width: 1px 0;<br />
margin: 0 0 1em 0;<br />
}<br />
<br />
.mainmenu a, .mainmenu a:visited {<br />
display: block;<br />
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;<br />
color: #FFFFFF;<br />
text-decoration: none;<br />
padding: 1em 1em;<br />
}<br />
.mainmenu ul ul a{<br />
width:100%;<br />
height:100%;<br />
}<br />
.mainmenu ul a{<br />
width:1%;<br />
}<br />
<br />
<br />
.mainmenu li {<br />
float: left;<br />
margin:0;<br />
padding:0;<br />
}<br />
<br />
.mainmenu ul li {float:left; position:relative; }<br />
.mainmenu ul li a {white-space:nowrap;}<br />
<br />
.mainmenu li ul {<br />
position: absolute;<br />
left: -999em;<br />
height: auto;<br />
width:15em; <br />
<br />
background: #222222;<br />
font-weight: normal;<br />
border-width: 1px;<br />
margin: 0;<br />
}<br />
<br />
.mainmenu li li {<br />
width:15em ;<br />
}<br />
<br />
.mainmenu li li a{<br />
width:13em ;<br />
}<br />
<br />
.mainmenu li ul {<br />
margin: 0;<br />
}<br />
.mainmenu li ul ul {<br />
margin: -2.8em 0 0 13.5em;<br />
}<br />
.ul_ch, <br />
.mainmenu li:hover ul ul,<br />
.mainmenu li li:hover ul ul,<br />
.mainmenu li li li:hover ul ul,<br />
.mainmenu li li li li:hover ul ul,<br />
.mainmenu li li li li li:hover ul ul<br />
{<br />
left: -999em;<br />
}<br />
.mainmenu li:hover ul,<br />
.mainmenu li li:hover ul,<br />
.mainmenu li li li:hover ul,<br />
.mainmenu li li li li:hover ul,<br />
.mainmenu li li li li li:hover ul<br />
{<br />
left: auto;<br />
}<br />
.mainmenu li:hover>ul.ul_ch <br />
{<br />
left: auto;<br />
}<br />
<br />
.mainmenu li:hover{<br />
background: #000000;<br />
}<br />
<br />
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{<br />
color:#FFFFFF;<br />
}<br />
.mainmenu li:hover li a, .mainmenu li li:hover li a, <br />
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,<br />
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, <br />
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited<br />
{<br />
color:#ffffff;<br />
}<br />
.mainmenu li li:hover, .mainmenu li li li:hover, <br />
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover <br />
{<br />
background: #333333;<br />
z-index:9999;<br />
}<br />
.mainmenu li li:hover a,.mainmenu li li li:hover a, <br />
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a<br />
{<br />
color: #ffffff; <br />
}<br />
<br />
.mainmenu ul ul a, .mainmenu ul ul a:visited,<br />
.mainmenu li li a, .mainmenu li li a:visited<br />
{<br />
color: #ffffff;<br />
}<br />
.mainmenu ul ul a:hover,<br />
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,<br />
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,<br />
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,<br />
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,<br />
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{<br />
color: #ffffff;<br />
}<br />
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,<br />
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,<br />
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,<br />
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{<br />
color: #ffffff;<br />
}<br />
<br />
<br />
/* end of mainmenu css */<br />
<br />
<br />
<br />
</style> <!-- PULL DOWN MENU - BEGIN --><br />
<div class="mainmenu"><br />
<ul><br />
<li class="li_nc"><a href="/" target="_self">LINK</a></li><br />
<li class="li_nc"><a href="/" target="_self">LINK</a></li><br />
<li class="li_nc"><a href="/" target="_self">LINK</a></li><br />
<li class="li_hc"><a href="#" target="_self">Products</a><br />
<ul class="ul_ch"><br />
<li class="li_nc"><a href="#" target="_self">Product 2</a></li><br />
<li class="li_nc"><a href="#" target="_self">Product 3</a></li><br />
</ul><br />
</li><br />
<li class="li_hc"><a href="#" target="_self">Urlaubs - Photos</a><br />
<ul class="ul_ch"><br />
<li class="li_nc"><a href="#" target="_self">1988 - Kroatien - Vodice </a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 2</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 3</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 4</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 5</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 6</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 7</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 9 </a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 10</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 7</a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 9 </a></li><br />
<li class="li_nc"><a href="#" target="_self">Service 10</a></li><br />
</ul><br />
</li><br />
<li class="li_nc"><a href="/" target="_self">Home</a></li><br />
</ul><br />
</div><br />
<!-- END OF PULL DOWN MENU --><br />
<p> </p><br />
<p>This is just a demo page...</p><br />
<img src="//img.webme.com/pic/s/steiner-kf/background_black_800.jpg" alt="" /> </meta><br />
</meta> |
| | | | oleck61
(108 Posts bisher) | | | Zitat: | <title>CSS DropDown Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Keep the http-equiv meta tag for IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=8"> <!-- Link the CSS file here --> <style type="text/css" media="screen,projection">@charset "utf-8";
/* CSS Document */
body {
background-color: #000000;
/* for pull-down menu to work in IE6*/
behavior:url("csshover2.htc" ;
}
/* pull-down mainmenu css */
.mainmenu{
float: left;
width: 100%;
padding: 0;
}
.mainmenu ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#FFFFFF;
background: #222222;
padding: 0;
border: solid #800000;
border-width: 1px 0;
margin: 0 0 1em 0;
}
.mainmenu a, .mainmenu a:visited {
display: block;
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
color: #FFFFFF;
text-decoration: none;
padding: 1em 1em;
}
.mainmenu ul ul a{
width:100%;
height:100%;
}
.mainmenu ul a{
width:1%;
}
.mainmenu li {
float: left;
margin:0;
padding:0;
}
.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li a {white-space:nowrap;}
.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;
background: #222222;
font-weight: normal;
border-width: 1px;
margin: 0;
}
.mainmenu li li {
width:15em ;
}
.mainmenu li li a{
width:13em ;
}
.mainmenu li ul {
margin: 0;
}
.mainmenu li ul ul {
margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
left: auto;
}
.mainmenu li:hover>ul.ul_ch
{
left: auto;
}
.mainmenu li:hover{
background: #000000;
}
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
color:#FFFFFF;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
color:#ffffff;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
background: #333333;
z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
color: #ffffff;
}
.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
color: #ffffff;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
color: #ffffff;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
color: #ffffff;
}
/* end of mainmenu css */
</style> <!-- PULL DOWN MENU - BEGIN -->
<div class="mainmenu">
<ul>
<li class="li_nc"><a href="/" target="_self">LINK</a></li>
<li class="li_nc"><a href="/" target="_self">LINK</a></li>
<li class="li_nc"><a href="/" target="_self">LINK</a></li>
<li class="li_hc"><a href="#" target="_self">Products</a>
<ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self">Product 2</a></li>
<li class="li_nc"><a href="#" target="_self">Product 3</a></li>
</ul>
</li>
<li class="li_hc"><a href="#" target="_self">Urlaubs - Photos</a>
<ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self">1988 - Kroatien - Vodice </a></li>
<li class="li_nc"><a href="#" target="_self">Service 2</a></li>
<li class="li_nc"><a href="#" target="_self">Service 3</a></li>
<li class="li_nc"><a href="#" target="_self">Service 4</a></li>
<li class="li_nc"><a href="#" target="_self">Service 5</a></li>
<li class="li_nc"><a href="#" target="_self">Service 6</a></li>
<li class="li_nc"><a href="#" target="_self">Service 7</a></li>
<li class="li_nc"><a href="#" target="_self">Service 9 </a></li>
<li class="li_nc"><a href="#" target="_self">Service 10</a></li>
<li class="li_nc"><a href="#" target="_self">Service 7</a></li>
<li class="li_nc"><a href="#" target="_self">Service 9 </a></li>
<li class="li_nc"><a href="#" target="_self">Service 10</a></li>
</ul>
</li>
<li class="li_nc"><a href="/" target="_self">Home</a></li>
</ul>
</div>
<!-- END OF PULL DOWN MENU -->
<p> </p>
<p>This is just a demo page...</p>
<img src="//img.webme.com/pic/s/steiner-kf/background_black_800.jpg" alt="" /> </meta>
</meta> |
|
Antworten:
Themen gesamt: 117 Posts gesamt: 172 Benutzer gesamt: 1
|
|
|
|
|
|
|
|
|
|
↓ ↓↓ ↓
;
