ERRO NO MENU

[gustavopagoto 0]

Ola boa noite, estou com muita dificuldade pois nao consigo deixar o menu para a esquerda para que eu consiga colocar uma logo a direita no site. quando mudo o float para right ele fica todo ao contrario! alguem pode me ajudar!

 

o site: http://www.gustavopagotoart.com.br/

 

 

css

 

#menu {
background-color: rgba(0, 0, 0, 0.8);
float: left;
width: 100%;
}
.menus,
.menus * {
margin:0 auto;
padding: 0;
list-style: none;
list-style-type: none;
line-height: 1.0

}
.menus ul {
position: absolute;
top: -999em;
width: 50%

}
.menus ul li {
width: 100%
}
.menus li:hover {
visibility: inherit
}
.menus li {
float: left;
position: relative;

}
.menus a {
display: block;
position: relative
display: inline;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.menus a:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #ecc731;
height: 2px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.menus a:hover:before, .menus a:focus:before, .menus a:active:before {
left: 0;
right: 0;
}
.menus li:hover ul,
.menus li.sfHover ul {
left: 0;
top: 100%;
z-index: 99
}
.menus li:hover li ul,
.menus li.sfHover li ul {
top: -999em
}
.menus li li:hover ul,
.menus li li.sfHover ul {
left: 100%;
top: 0
}
.menus li li:hover li ul,
.menus li li.sfHover li ul {
top: -999em
}
.menus li li li:hover ul,
.menus li li li.sfHover ul {
left: 100%;
top: 0
}
.children {
min-width: 277px;
background: rgba(0, 0, 0, 0.8);
font-weight: 300;
}
.children li a {
font-weight: 300!important;
font-size: 16px!important;
padding: 17px!important;
}
.menu-secondary li a {
color: #fff;
padding: 18px 15px;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
}
.menu-secondary li a:hover,
.menu-secondary li a:active,
.menu-secondary li a:focus,
.menu-secondary li:hover > a,
.menu-secondary li.current-cat > a,
.menu-secondary li.current_page_item > a,
.menu-secondary li.current-menu-item > a {} .menu-secondary li li a:hover,
.menu-secondary li li a:active,
.menu-secondary li li a:focus,
.menu-secondary li li:hover > a,
.menu-secondary li li.current-cat > a,
.menu-secondary li li.current_page_item > a,
.menu-secondary li li.current-menu-item > a {
-webkit-transition: all .3s ease-in-out;
font-weight: 700!important;
margin-left: 5px
}

[L. Henrique 179]

Gustavo,

Essa não é uma das melhores maneiras, mas da uma olhada pra ter noção: DEMO.

Abraços!

Obs.: Antes de criar um tópico, leia: Como criar um tópico para o seu problema.

[gustavopagoto 0]

OBRIGADO

vendo a demo resolvi alguns perengues e consegui esse resultado

 

http://www.gustavopagotoart.com.br/

 

 

 

[L. Henrique 179]

Boa garoto!

Depois que você entender como funciona (não precisa ser 100%) o CSS3 / Level 4 e HTML5, comece a aplicar frameworks front-end como Bootstrap, Foundation, MaterializeCSS, Skeleton... Vão te poupar bastante tempo.

Abraços!