Hvad er forskellen?
Når jeg indsætter understående i <head> delen af min side så virker menu som den skal men hvis jeg flytter koden til et css ark så virker dropdown funktionen ikke mere, har fjernet <style> delen i css (og prøvet at lade den være) - er der nogen som kan forklare mig hvorfor det ikke virker som CSS ark?Ps: jeg tester i IE6, IE7, FireFox, Opera og Netscape...
Her er det:
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/
/* page styling, unimportant for the menu. only makes the page looks nicer */
body {
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
.example {
background: #eee;
padding: 50px;
}
/* - - - ADxMenu: BASIC styles - - - */
/* remove all list stylings */
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
/* move all list items into one row, by floating them */
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
}
/* define new starting point for the nested UL, thus making positioning it a piece of cake */
.menu li:hover {
position: relative;
}
/* force the submenu items into separate rows, while still keeping float:left (which resolves IE6 white-gap problem) */
.menu li li {
width: 100%;
}
/* fix the position for 2nd level submenus.
first make sure no horizontal scrollbars are visible on initial page load by sliding them all into top-left corner */
.menu li li ul {
top: 0;
left: 0;
}
/* ...and then place the submenu where it should be when shown */
.menu li li:hover ul {
left: 100%;
}
/* initialy hide all sub menus */
.menu ul {
display: none;
position: absolute;
z-index: 10;
}
/* display them on hover */
.menu li:hover>ul {
display: block;
}
/* -- float.clear -- force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
/* IE7 float clear: */
.menu, .menu ul {
min-height: 0;
}
/* -- float.clear.END -- */
/* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
if you do it, make sure you 110% know what you do */
.menu ul {
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
/*background: #f00;*/ /* uncomment this if you want to see the "safe" area. you can also use to adjust the safe area to your requirement */
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu, .menu ul li {
color: #eee;
background: #234;
}
.menu ul {
width: 11em;
}
.menu li:hover>a {
color: #fc3;
}
.menu a {
text-decoration: none;
color: #eee;
padding: .4em 1em;
display: block;
}
.menu a:hover {
color: #fc3;
}
/* Fix for IE5/Mac \*//*/
.menu a {
float: left;
}
.menu {
display: inline-block;
}
/* End Fix */
/*]]>*/
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/
/* - - - ADxMenu: BASIC styles - - - */
.menu, .menu ul {
height: 1%;
}
.menu ul {
background-image: url(empty.gif);/* required for sticky to work in IE6 - due to its hover bug */
display: block;
visibility: hidden;
}
/* this style must be exact copy of: ".menu li li:hover ul" style above */
.menu li li.adxmhover ul {
left: 100%;
}
/* the following two rules simulate li:hover>ul selector
repeat enough times to cover all nested levels
look at www.aplus.co.yu/adxmenu/trouble/ if some of your submenus do now show up */
.adxmhover ul,
.adxmhover .adxmhover ul {
visibility: visible;
}
.adxmhover li ul,
.adxmhover .adxmhover li ul {
visibility: hidden;
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu ul a {
height: 1%;
}
.adxmhover a,
.adxmhover .adxmhover a {
color: #fc3;
}
.adxmhover li a,
.adxmhover .adxmhover li a {
color: #eee;
}
/*]]>*/
</style>
<script type="text/javascript" src="ADxMenu.js"></script>
<![endif]-->
