Avatar billede michaelh84 Juniormester
17. november 2017 - 18:49 Der er 5 kommentarer og
1 løsning

CSS pil i dropdown menu

Hej Kære Eksperter,

Skal skynde mig at sige jeg ikke er nogen programmerings ørn.
Mit relative simpel problem er der er en lille pil der peger nedad i en dropdown menu. Den skal væk! :)

Jeg tænker umiddelbart det er CSS delen der bestemmer om den pil er der eller ej, ret mig hvis forkert.

Har prøvet at poste den del af koden hvor jeg tror det indeholder.
Det er et template af en hjemmeside jeg har købt på nettet og er det sidste jeg mangler for at have siden færdig, håber meget en kan hjælpe mig.

.sf-menu ul {
  width: 187px;
  font: 400 13px/13px "Open Sans", sans-serif;
  position: absolute;
  top: 44px;
  left: 0;
  background: #5d6166;
  text-align: center;
  padding: 23px 0 22px 0;
  z-index: 2;
  display: none;
}
.sf-menu ul > li + li {
  margin-top: 19px;
}
.sf-menu ul li {
  position: relative;
  display: block;
}
.sf-menu ul li > .sf-with-ul:after {
  font-family: FontAwesome;
  font-size: 10px;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  cursor: default;
  content: "\f0da";
  color: #ffffff;
  bottom: -1px;
  right: 40px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.sf-menu ul li a {
  color: #ffffff;
  text-transform: none;
}
.sf-menu ul li a:hover {
  color: #f54f29;
}
.sf-menu ul > .sfHover > a:after {
  color: #f54f29;
}
.sf-menu ul li.sfHover > a {
  color: #f54f29;
}
/* Second level sub-menu styles
========================================================*/
.sf-menu ul ul {
  font-size: 12px;
  position: absolute;
  top: -21px;
  left: 187px;
  background: #f54f29;
  padding: 13px 0 15px 0;
  z-index: 4;
  text-align: center;
}
.sf-menu ul ul li {
  line-height: 27px;
  margin-top: 1px;
}
.sf-menu ul ul li a {
  color: #6666666;
  text-transform: none;
  display: block;
}
.sf-menu ul ul li:hover {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background: #5d6166;
}
.sf-menu ul ul li:hover a {
  color: #ffffff;
}
.sf-menu ul ul li + li {
  margin-top: 2px;
}
@media only screen and (max-width: 767px) {
  .sf-menu {
    display: none;
  }
  nav {
    width: 100%;
    float: none;
  }
  .select-menu {
    border-radius: none;
    display: block;
    text-transform: capitalize;
    float: none;
    color: #f54f29;
    width: 100%;
    margin-top: 20px;
    background: #ffffff;
    font: 22px/28px "Open Sans", sans-serif;
    text-align: left;
    border: 1px solid #f54f29;
    padding: 2px 0;
    position: relative;
    margin-bottom: 20px;
  }
  .select-menu option {
    text-align: left;
    position: relative;
  }
}
Avatar billede keysersoze Guru
17. november 2017 - 23:20 #1
Det er lidt svært at gætte bare ud fra det - men mit gæt er at du skal fjerne dine :after.
Avatar billede michaelh84 Juniormester
18. november 2017 - 01:58 #2
Jeg prøver, sig gerne hvis der er andet jeg kan gøre for at hjælpe dig til svar :)
Muligvis hele css filen kaldet style da jeg tror den er deri?
Avatar billede michaelh84 Juniormester
18. november 2017 - 02:06 #3
Jeg fjernede alle sammen, det blev lidt et stort rod, men plien er væk!!
Selve min menu i toppen af sidden er helt off, prøver at tilføje :after en efter en ser om det kan lykkedes. vender tilbage.
Avatar billede michaelh84 Juniormester
18. november 2017 - 02:12 #4
Jeg har fundet linien der fjerne selve pilen, men hvis jeg fjerner :after forsvinder pilen og min øverste menu går helt amok. selve fanebladet med dropdown menuen hopper længere op på siden og er ikke længere en del af den øverste menu.

Er denne det drejer sig om

sf-menu > li > .sf-with-ul:after     
  font-family: FontAwesome;
  font-size: 10px;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  cursor: default;
  content: "\f0d7";
  color: #ffffff;
  bottom: 15px;
  left: 50%;
  margin-left: -3px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
Avatar billede keysersoze Guru
18. november 2017 - 10:50 #5
En absolut positioneret :after bør ikke flytte på andre elementer. Hvis du benytter din developer toolbar - http://www.soze.dk/miniblog/bliv-en-hurtigere-webudvikler-med-browservaerktoejer/ - så bør du kunne inspecte præcis hvad der er hvad.
Avatar billede michaelh84 Juniormester
20. november 2017 - 22:36 #6
Syntes ikke lige det program gav mening for mig :)

Sad og rodede lidt med det, og du havde ret det var blot hele linien
.sf-with-ul:after
der skulle fjernes og ikke blot :after

Du skal have tusind tak for hjælpen!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester