Jump to content
Sign in to follow this  
Golist

Zmniejszenie szerokości i zmiana koloru tła w submenu CSS

Recommended Posts

Witam Chciałbym się zapytać dlaczego moje menu podczas kodowania submenu na dużym ekranie jest szerokie oraz dlaczego pod submenu gdy się menu rozwija nie mogę zmienić koloru nie całego menu a tylko submenu po rozwinięciu. Czy ktoś by mógł mi pomóc aby zweźić tło submenu tak aby rozwijało sie pojedynczo oraz mógł odrazu zmienić kolor tła submenu na inny tak aby się razem z menu nie zlewało. Strona gdzie można zobaczyć problem to: http://www.houseonly.pl/

 

to kod css:

Spoiler

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {

  background: #2b2b2b;
}
header {
  height:50px;
  background: #010005;
  color: #fff;
  display: flex;
  justify-content: center;
}
#btn-menu {
  display: none;

}
submenu {
  width: 10px;
}
header label {
  font-size: 30px;
  cursor: pointer;
  margin-top: 7px;
  display: none;

}
.menu ul {
  background: #010005;
  display: flex;
  list-style: none;    
}
.menu ul ul {
  display: none;

}
.menu a {
  display: block;
  padding: 15px 60px;
  color: #fff;
  text-decoration: none;

}
.menu a:hover {
  background: #FE7F00;
}
.menu a span {
  margin-left: 10px;
}
.menu ul li:hover ul {
  display: block:
    position: static;

}
@media (max-width:768px) {
  header label {
    display: block;

  }    

  .menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;

    transition: all 0.3s;

  }

  .menu ul {
    display: block;
    background: #555;

  }

  .memu ul li:hover ul {
    display: none;
  }

  .menu a span {
    position: absolute;
    right: 5px;
  }

  #btn-menu:checkbox - .menu {
    transform: translateX(0%); 
  }
}

 


 

Share this post


Link to post
.menu ul li > ul {
  ...
}

Tego Ci brakuje w Twoim CSS. Swoją drogą co to za wykorzystanie inputa i label dla mobilnego menu? Przecież to służy do zupełnie czego innego.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...