css - Submenu gemme sig - Udvikleren.dk - Programmering, webdesign og grafik

Tags: joomla css

Bruger #15663 @ 28.09.11 14:37

Hejsa.

Hvis man forsøger at fremkalde min submenu ved at holde musen over et af mine menupunkter, så forsvinder den ind bag min slider.

Nogen der kan hjælpe mig?

Min css fil kommer sidst, så den må jo overgå det der står tidligere.
I få derfor min css

CSS kode

 /** Reset **/
 ul
 {
  margin: 0;
  padding: 0;
  border: 0 ;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
 }
 
 body
 {
  margin: 0;
  margin-top: 10px;
  padding: 0;
  font: 12px Arial, Helvetica, sans-serif;
 }
 
 a
 {
  color: #000;
  text-decoration: none;
 }
 
 a:hover
 {
  text-decoration: underline;
 }
 
 ul
 {
  margin-left: 15px;
 }
 
 #wrapper
 {
  width: 960px;
  height: 500px;
  margin: 0 auto;
 }
 
 #logo
 {
     float: left;
 }
 
 #header
 {
  width: 760px;
  float: left;
  margin: 0;
  padding: 0;
  background: url('../images/topnav_bg.gif') repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-top-right-border-radius: 10px;
  -khtml-top-right-border-radius: 10px;
  border-top-right-radius: 10px;
 }
 
 #header #nav
 {
  float: left;
  width: 720px;
 }
 
 #header #nav ul.menu
 {
  list-style: none;
  padding: 0 20px;
  margin: 0;
  float: left;
  font-size: 1.2em;
 }    
 
 #header #nav ul.menu li
 {
  float: left;
  margin: 0;
  padding: 0 15px 0 0;
  position: relative;
 }
 
 #header #nav ul.menu li a
 {
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
 }
 
 #header #nav ul.menu li a:hover
 {
  background: url('../images/topnav_hover.gif') no-repeat center top;
 }
 
 .sf-sub-indicator
 {
  position: absolute;
  display: block;
  right: .75em;
  top: 1.05em;
  width: 10px;
  height: 10px;
  text-indent: -999em;
  overflow: hidden;
  background: url('../images/subnav_btn.gif') no-repeat center top;
 }
 
 #header #nav ul.menu li ul
 {
  list-style: none;
  position: absolute;
  left: 0;
  top: 35px;
  background: #333;
  margin: 0;
  padding: 0;
  display: none;
  float: left;
  width: 170px;
  border: 1px solid #111;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-bottom-left-radius: 10px;
  -webkit-bottom-right-radius: 10px;
  -khtml-bottom-left-radius: 10px;
  -khtml-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 10;
 }
 
 #header #nav ul.menu li ul li
 {
  margin: 0;
  padding: 0;
  border-top: 1px solid #252525;
  border-bottom: 1px solid #444;
  clear: both;
  width: 170px;
 }
 
 #header #nav ul.menu li ul li:last-child
 {
  border-bottom: 0px;
 } 
 
 #header #nav ul.menu li ul li a
 {
  float: left;
  width: 145px;
  background: #333 url('../images/dropdown_linkbg.gif') no-repeat 10px center;
  padding-left: 20px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-bottom-left-radius: 10px;
  -webkit-bottom-right-radius: 10px;
  -khtml-bottom-left-radius: 10px;
  -khtml-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
 }
 
 #header #nav ul.menu li ul li a:hover
 {
  background: #222 url('../images/dropdown_linkbg.gif') no-repeat 10px center;
 }
 
 
 #slider
 {
  margin-bottom: 10px;
  z-index: 1;
 } 
 
 #slider a
 {
  color: #fff;
  text-decoration: none;
 }
 
 #search
 {
  margin-bottom: 10px;
  width: 100%;
 }    
 
 #search input[type="text"]
 {
  width: 300px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-bottom-left-border-radius: 5px;
  -webkit-top-left-border-radius: 5px;
  -khtml-bottom-left-border-radius: 5px;
  -khtml-top-left-border-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
  font-size: 14px;
  padding: 5px;
  font-family: Arial, sans-serif;
  border-color: #a3acab;
  height: 20px;
  margin-top: 10px;
 }
 
 #search input[type="submit"]
 {
  line-height: 1;
  padding: 5px 10px;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-specing: 1px;
  color: #fff;
  cursor: pointer;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-bottom-right-border-radius: 5px;
  -webkit-top-right-border-radius: 5px;
  -khtml-bottom-right-border-radius: 5px;
  -khtml-top-right-border-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
  background: #222 url('../images/topnav_bg.gif') left top repeat-x;
  margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
  color: #fff;
  border: 0;
  height: 35px;
 }
 
 #content
 {
  width: 960px;
  
 }                            
 
 #content #left
 {
  float: left;
  width: 960px;
 }
 
 #content #left #erhverv
 {
  width: 455px;
  float: left;
 }
 
 #content #left #erhverv h1
 {
  width: 465px;
  background: #000;
  color: #fff;
  margin:: 0px;
  margin-bottom: 10px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-top-left-border-radius: 5px;
  -webkit-top-right-border-radius: 5px;
  -khtml-top-left-border-radius: 5px;
  -khtml-top-right-border-radius: 5px; 
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 5px;
  font-size: 14px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888; 
 }
 
 #content #left #erhverv .cat
 {
  width: 140px;
  margin-right: 9px;
  float: left;
  text-align: center;
  min-height: 40px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
  cursor: pointer;
  min-height: 155px;
 }
 
 #content #left #erhverv img
 {
  border: 0px;
  margin-bottom: 10px;
 }
 
 #content #left #erhverv .cat a
 {
  text-decoration: none;
  color: #000;
 }
 
 #content #left #erhverv .cat a:hover,
 #content #left #erhverv .cat:hover
 {
  background: #000;
  color: #fff;
 }
 
 #content #left #erhverv #last-erhverv
 {
  width: 465px;
  height: 20px;
  background: #000;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-bottom-left-border-radius: 5px;
  -webkit-bottom-right-border-radius: 5px;
  -khtml-bottom-left-border-radius: 5px;
  -khtml-bottom-right-border-radius: 5px; 
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
 }
 
 #content #left #privat
 {
  width: 475px;
  float: left;
 }
 
 #content #left #privat h1
 {
  width: 465px;
  background: #fc0204;
  color: #fff;
  margin:: 0px;
  margin-bottom: 10px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-top-left-border-radius: 5px;
  -webkit-top-right-border-radius: 5px;
  -khtml-top-left-border-radius: 5px;
  -khtml-top-right-border-radius: 5px; 
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 5px;
  font-size: 14px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888; 
 }
 
 #content #left #privat .cat
 {
  width: 140px;
  margin-right: 9px;
  float: left;
  text-align: center;
  min-height: 40px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid red;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
  cursor: pointer;
  min-height: 155px;
 }
 
 #content #left #privat img
 {
  border: 0px;
  margin-bottom: 10px;
 }
 
 #content #left #privat .cat a
 {
  text-decoration: none;
  color: #000;
 }
 
 #content #left #privat .cat a:hover,
 #content #left #privat .cat:hover
 {                                                                                                                                 
  background: red;
  color: #fff;
 }
 
 #content #left #privat #last-privat
 {
  width: 480px;
  height: 20px;
  background: red;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-bottom-left-border-radius: 5px;
  -webkit-bottom-right-border-radius: 5px;
  -khtml-bottom-left-border-radius: 5px;
  -khtml-bottom-right-border-radius: 5px; 
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
  color: red;
 }
 
 #content #left object
 {
  margin-top: 10px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-top-left-border-radius: 5px;
  -webkit-top-right-border-radius: 5px;
  -khtml-top-left-border-radius: 5px;
  -khtm?-top-right-border-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
 }
 
 
 
 #content #right:
 {
  float: right;
  width: 298px;
  
 }
 
 #content #right #mc_embed_signup
 {
  width: 278px;
  float: right;
  margin-top: 10px;
  border: 1px solid black;
  padding: 10px;
  padding-bottom: 20px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888; 
 }
 
 #content #right #mc_embed_signup input
 {
  width: 270px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 5px;
  height: 20px;
 }                            
 
 #content #right #mc_embed_signup .button
 {
  width: 80px;
  float: right;
  line-height: 1;
  padding: 5px 10px;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-specing: 1px;
  color: #fff;
  cursor: pointer;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
  background: #222 url('../images/topnav_bg.gif') left top repeat-x;
  margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
  color: #fff;
  border: 0;
  height: 35px;
 }
 
 #content #right #kort
 {
  width: 278px;
  float: right;
  margin-top: 10px;
  border: 1px solid black;
  padding: 10px;
  padding-bottom: 20px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  -khtml-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
 }
 
 #content #right #kort table
 {
  width:  100%;
 }
 
 #content #right #kort table img
 {
  width: 70%;
  height: 60%;
 }
 
 
 .componentheading
 {
  display: none;     
 }
 
 .contentheading
 {
  font-size: 20px;
  font-weight: bold;
  
 } 
 
 #footer
 {
  width: 960px;
  background: #282828;
  height: 30px;
  padding-top: 5px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  -moz-box-shadow: 2px 2px 2px #888;
  -webkit-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-bottom-left-border-radius: 10px;
  -webkit-bottom-right-border-radius: 10px;
  -khtml-bottom-left-border-radius: 10px;
  -khtml-bottom-right-border-radius: 10px; 
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 20px;                     
 } 
 
 #footer a
 {
  color: #fff;
  text-decoration: none;
 }
 
 #footer a:hover
 {
  text-decoration: underline;
 } 
 
 img[alt="Powered by VirtueMart"] { display: none; }
 
 
 
 a.mainlevel_frontpage_categories
 {
  color: #fff;
 }
 a[title="Erhverv"]
 {
  background: black;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  color: #fff;
  margin-bottom: 5px;
  cursor: default;
 }
 
 a[title="Privat"]
 {
   background: red;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  color: #fff;
  margin-bottom: 5px;
  cursor: default;                                    
 }
 
 a.sublevel_frontpage_categories
 {
  text-decoration: none;
  float: left;
  border: 1px solid red;
  color: green;
 }
 
 img[alt="feed"] {display: none;}
 form[name="order"] {display: none;}
 .browseProductContainer {border-bottom: 1px solid #000; padding-bottom: 70px; }
 .browseProductTitle { width: 100%; margin: 0; margin-top: 30px; }
 .browseProductTitle a { color: #000; text-decoration: none; }
 .browseProductTitle a:hover { text-decoration: underline; }
 .browsePriceContainer { float: left;}
 .browseProductImageContainer { width: 300px; float: right; margin-bottom: 15px; }
 .browseProductDescription { float: left; margin-bottom: 10px;}
 a[title="Produktdetaljer"] { display: none; }
 .browseAddToCartContainer { float: none; margin-top: -50px; }
 .addtocart_form {}
 .addtocart_button {float: left;}
 
 
 .vmCartContainer {background-color: #fff; border: none;}
 
 label{ display: none; }
 input[type="checkbox"] { display: none; }
 input[type="radio"] { display: none; }
 select { display: none; }
 #search_searchword { display: none; }
 button[name="Search"] { display: none; }

Linket til min side

6 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #9814 @ 28.09.11 14:58

1.302

Umiddelbart virker det fint her, i IE 8. Men den kommer med en javascript fejl i main.js hvor du mangler en )

Bruger #15663 @ 28.09.11 15:09

415

Hej Brian.

Skifter den så også med billederne eller står den bare og loader konstant?

Bruger #9814 @ 28.09.11 15:12

1.302

Den loader konstant

Bruger #15663 @ 28.09.11 15:14

415

Hvis du så tjekker den i FF, Chrome, Opera eller Safari, så loader den ikke, men viser den slider som den skal, jeg kan bare ikke finde den fejl der gør at den ikke vil vises i IE, samt hvorfor den lige pludselig sender menuen bag den slider.

Bruger #13010 @ 28.09.11 15:15

440

Jeg kan ikke finde fejlen man kan du ikke prøve og lave en side hvor det kun er menu og de skiftende billeder som er over menuen som er der også fjerne alt andet.
Så det lettere at finde fejlen.

Bruger #15663 @ 28.09.11 15:30

415

Det hele køre fra en joomla extension

EDIT: Problem løst... ændrede z-index på #header #nav ul.menu li ul til 9999

Indlæg senest redigeret d. 28.09.2011 15:33 af Bruger #15663

Submenu gemme sig

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler