Guys I'm trying to align these 3 lines under the title "Awarded in 3 Categories"

 

I wanna start JUST under the letter A and be left not centered like the title.

 

I tried to put the 3 lines in a div box and with margin:auto; to align them, but didnt work.

 

https://codepen.io/anon/pen/QgbMEL

 

 

thank you

Like this? https://codepen.io/anon/pen/gRpqOY

It works but with a magic number, but I think it's the only way to do what the OP wants. It will break if the title were to change - number of chars, font-size, letter-spacing etc.

 

I'd encourage a change in design.

Sorry guys I cannot understand what's happening

Ok I found the solution, I removed float property and fixed them all!!!

Edited June 7, 20179 yr by mikelamar

Can you tell me what property I have to edit to add hover color on my dropdown menu?

That would be the :hover pseudo-class. You style the a element , not the li. I can't remember why. So something like

#navigation a:hover {
  color: magenta;
  background-color: green;
}

That was missing from the code at all...I lost 2 hours searching !!!

 

I thought it was this

ul.menu>li.has-children:hover ul.dropdown{
 
  display: block;
  overflow: visible;
  max-height: 3000px;
  max-width: 3000px;
  opacity: 1;
  transform: perspective( 600px ) rotateX( 0deg );
  transition: transform 0.5s ease, opacity 0.2s ease, max-height 0s step-end, max-width 0s step-end, padding 0s step-end;
 

or this

 

 

ul.dropdown a:hover{
  color:black;
  text-decoration:none;
  display: block;
  padding: 6px 12px;
  margin: 0px;
  position: relative;
  border-bottom: 1px solid #aaa;
}

Edited June 8, 20179 yr by mikelamar

They are the very devil to create and style, those drop-down, fly-out things. Really I find I have to use a ready made nav menu but it's well worth being able to alter and adapt it.

They are pretty straightforward. Add classes and don't use element or ID selectors.

Here's a basic example I just knocked up, hope it helps illustrate how to build such a menu

HTML

<nav>
  <ul class="nav clearfix">
    <li class="nav__item">
      <a href="" class="nav__link">Fruit</a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">Meat</a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">Veg</a>
    </li>
    <li class="nav__item has-popout">
      <a href="" class="nav__link">Fish</a>
      <ul class="nav-popout">
        <li class="nav__item nav-popout__item">
          <a href="" class="nav__link">Salmon</a>
        </li>
        <li class="nav__item nav-popout__item">
          <a href="" class="nav__link">Tuna</a>
        </li>
        <li class="nav__item nav-popout__item">
          <a href="" class="nav__link">Haddock</a>
        </li>
      </ul>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">Household</a>
    </li>
  </ul>
</nav> 

CSS

.nav,
.nav-popout {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item,
.nav-popout__item {
  padding: 0;
}

.nav__item {
  float: left;
}

.nav__item:hover > .nav__link,
.nav__item:focus > .nav__link {
  background: #bbb;
}

.nav__link {
  display: block;
  padding: 10px 20px;
  background: #ccc;
  text-decoration: none;
}

.nav__item.has-popout {
  postition: relative;
 
}

.nav__item.has-popout > a::after {
  content: ' ▼'
}

.nav__item.has-popout:hover > a::after,
.nav__item.has-popout:focus > a::after{
  content: ' ▲'
}

.nav-popout {
  transform: scale(1, 0);
  transform-origin: 50% 0;
  transition: transform 0.2s;
}

.nav__item.has-popout:hover > .nav-popout ,
.nav__item.has-popout:focus > .nav-popout {
  transform: scale(1);
}

.nav-popout__item {
  float: none;
}

https://codepen.io/anon/pen/RgWeyb

Without wanting to sound condescending if you learn how CSS selectors and the box model works then almost everything with regards to CSS will make sense

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

There's quite a lot of reading and theory involved but it's well worth taking the time to learn - then things like nav menus will become a doddle and CSS actually becomes a joy to work with!

Edited June 8, 20179 yr by rbrtsmith

http://www.webdesignerforum.co.uk/topic/86599-almost-final/

 

 

check it here guys, thank you very much both of you, my next project is making it responsive during the summertime

 

PS: I need vacations