I am creating a page where there is a menu that contains a submenu centered at the top of the page, my problem is being to centralize the submenu with the main menu, because it always goes out of alignment, does anyone know what it can be? Thank you in advance for any help!
"ps:in the image contains the visible error"
edit1:run and with the link and with the html that was missing.
link:https://testtestteste111111.000webhostapp.com/
.menu{
width:100%;
height:49px;
background-color:#494545;
font-family:'Arial';
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index:9999;
}
.menu ul{
list-style:none;
position:relative;
margin-left:24%;
}
.menu ul li{
width:150px;
float:left;
}
.menu a{
padding:15px;
display:block;
text-decoration:none;
text-align:center;
background-color:#494545;
color:#fff;
}
.menu ul ul{
position:absolute;
visibility:hidden;
}
.menu ul li:hover > ul{
visibility:visible;
/* border:1px solid #901E93; sub div*/
}
.menu a:hover{
background-color:#7F818D;
color:#fff;
}
.menu ul ul li{
float:none;
border-bottom:solid 1px #ccc;
margin-left:-164%;
}
.menu ul ul li a{
background-color:#646464;
}
label[for ="bt_menu"]{
padding:5px;
background-color:#494545;
color:#fff;
font-family:"Arial";
text-aling:center;
font-size:30px;
cursor:pointer;
width:100%;
max-height:58px;
z-index:9999;
margin-top:-10px;
top:-5px;
display:none;
position:fixed;
}
.imgbar{
max-height:25px;
max-width:25px;
margin-top:10px;
}
#bt_menu{
display:none;
}
#media(max-width:800px){
label[for="bt_menu"]{
display:block;
color:#fff;
z-index:9999;
position:fixed;
margin-top:1px;
}
.menu{
margin-top:-1px;
margin-left:-100%;
transition:all .4s}
#bt_menu:checked ~ .menu{
margin-left:0;}
.menu ul li{
width:100%;
float:none;}
.menu ul ul{
position:static;
overflow:hidden;
max-height:0;
transition:all .4s;
}
.menu ul li:hover ul{
height:auto;
max-height:200px;
}
.menu ul{
list-style:none;
position:relative;
margin-left:0;
z-index:9999;
}
.menu ul ul li{
float:none;
border-bottom:solid 1px #ccc;
margin-left:0;
}
.parallax {
width:100%;
/* The image used */
background-image: url(../img/img1.jpg);
/* Set a specific height */
height: 800px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top:-50px;
}
#ultopo{
margin-top:49px;
}}
html
<input type="checkbox" id="bt_menu">
<label for="bt_menu"><img class="imgbar" src="img/bars.svg"></img></label>
<nav class="menu">
<ul id="ultopo">
<li>Home</li>
<li>Serviços
<!-- nested UL in LI -->
<ul>
<li>ex:A</li>
<li>ex:b</li>
</ul>
</li>
<li>Atuaçao
<!-- nested UL in LI -->
<ul>
<li>ex:A</li>
<li>ex:B</li>
<li>ex:C</li>
</ul>
</li>
<li>contato</li>
</ul>
</nav>
Please update css
Here is link https://jsfiddle.net/jbv09vy4/1/
Add css
.menu ul li {
position: relative;
}
.menu ul ul {
left: 0;
margin: 0;
}
and remove styles margin-left: -164% from
.menu ul ul li {
float: none;
border-bottom: solid 1px #ccc;
margin-left: -164%;
}
Related
I trying to to make a responsive navigation menu (logo LEFT and nav RIGHT, at one point the it was working fine on the large media types but failed on the mobile media (order of nav back to front) I have tried aligning the UL float right and Li float left but no joy, I'm sure I,m just over looking something simple.
HTML
<div id="Header"><!--Start of Header-->
<div><img id="Logo"src="images/logo.png"></div>
<nav><!--start of nav tag-->
<span class="nav-btn"></span>
<ul class="nav">
<li>Home</li>
<li>About Us
<ul>
<li><a href="#Beliefs" >Beliefs</a></li>
<li>Pastors</li>
</ul>
</li>
<li>Services</li>
<li>Ministries
<ul>
<li>Evangelism</li>
<li>LifeGroups</li>
<li>Prayer</li>
<li>Youth</li>
<li>Childrens</li>
<li>Extra</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermons</li>
<li>Gallery</li>
<li>Newsletter</li>
<li>Videos</li>
</ul>
</li>
<li>Contact Us</li>
</ul><!--End of nav class ul tag-->
</nav><!--End of nav tag-->
</div><!--End of Header-->
CSS
/*Start of Navigation Bar*/
/*Navigation ul*/
.nav {
width:100%;
background:black;
line-height:100px;
position:fixed;
border-bottom: 1px red solid;
}
/*Navigation li*/
nav .nav li{
list-style-type: none;
float: left;
position:relative;
}
/*Dropdown Clear funtion*/
#NavBar ul:after{content:"";display:block;clear:both}
/*Navigation a*/
nav .nav li a{
color:white;
text-decoration: none;
padding:20px;
}
/*Navigation a HOVER*/
nav .nav li a:hover{
color:yellow;
text-decoration: none;
padding:px;
background:blue;
transition:all 0.8s;
}
/*Navigation li HOVER*/
nav .nav li:hover{
width:auto;
background:black;
transition:all 0s;
}
/*Mobile Menu HIDDEN submenu*/
/*hide submenu*/
nav .nav li ul {
width:auto;
display: none;
border-right:2px red solid;
border-left:2px red solid;
}
/*Mobile menu button Display:NONE*/
.nav-btn{display:none;}
/*Show submenu at hover*/
nav .nav li:hover ul {
width:auto;
display:block;
position:absolute;
top:100px;
background-color:black;
border-bottom:2px red solid;
}
/*Make submenu vertical*/
nav .nav li ul li{
width:100%;
display: block;
float:none;
line-height:60px;
position: relative;
z-index: 10;
}
/*Navigation sub li*/
nav .nav li ul li:hover{
width:auto;
color:red;
text-decoration: none;
background:blue;
}
/*Navigation a*/
nav .nav li ul li a:hover{
width:auto;
color:yellow;
text-decoration: none;
background-color:blue;
}
/*MOBILE PHONE*/
#media (max-width: 660px){
/*Navigation a HOVER 1st level - MOBILE PHONE*/
nav .nav li a:hover{
color:yellow;
background:black;
transition:all 0.0s;
}
/*Navigation a HOVER sub menu - MOBILE PHONE*/
nav .nav li ul li a:hover{
width:auto;
color:yellow;
text-decoration: none;
background-color:transparent;
}
/*Navigation ul size of ul main menu MOBILE PHONE*/
.nav {
width:60%;
height:auto;
background:black;
line-height:50px;
position:fixed;
border-radius:0 0 20px 0;
}
/*Navigation li size of li in - MOBILE PHONE*/
nav .nav li{
width:100%;
display:block;
float: none;
background-color:navy;
border-bottom:1px red solid;
}
/*Navigation li size of li in - MOBILE PHONE*/
nav .nav li:last-child{
border-radius:0 0 20px 0;
border-bottom:1px yellow solid;
}
/*sub menu background color - MOBILE PHONE*/
nav .nav li ul li{
width:100%;
height:100%;
left:30px;
line-height:30px;
background-color:orange;
}
/*2nd level UL - MOBILE PHONE*/
nav .nav li ul{
border-right:0px red solid;
border-left:0px red solid;
}
/*2nd level UL HOVER - MOBILE PHONE*/
nav .nav li:hover ul {
width:50%;
padding:0px;
margin:0px;
left:75px;
top:10px;
background-color:transparent;
}
/*1st level UL- MOBILE PHONE*/
.nav{
text-align:left;
display:none;
}
/*1st level LI- MOBILE PHONE*/
.nav > li{
display:block;
}
/*Menu BUTTON settings- MOBILE PHONE*/
.nav-btn{
width:100%;
height:70px;
display:block;
background-color:navy;
color:#FFF;
font-size:30px;
padding-left:10px;
padding-top:10px;
text-align:left;
cursor:pointer;
}
/*Menu BUTTON- MOBILE PHONE*/
.nav-btn:before{
content: "Menu";
}
}
You could do:
nav .nav {
float: left;
}
nav .nav li {
display:inline-block;
}
That would float the .nav div left instead, and the LI's will be next to eachother
I've created a vertical menu on the right of page and a not displayed panel (display:none) on the left, next to menu.Now, when I drag the mouse on links of menu (a:hover), the panel on the right should appear, but It doesn't! Why?
HTML:
<div id="menupanel">
<ul>
<li>
PERFORMANCE<img src="images/menu.png" />
<ul>
<li><h2>PERFORMANCE</h2>
<p>Are you an artist working in the field of live audiovisual...</p>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#menupanel{
margin-top:50px;
width:300px;
padding:0 75px;
clean:both;
}
#menupanel h1{
font-size:16px;
color:#FFF;
margin:10px auto;
text-align:center;
}
#menupanel h2{
text-align:center;
padding-top:30px;
color:#FFF;
}
#menupanel ul{
list-style: none;
margin: 0;
width: 300px;
}
#menupanel ul li a{
display: block;
margin: 0;
padding: 0 3px;
text-decoration: none;
color: #FFF;
background:#05c597;
height:54px;
text-align:center;
line-height:54px;
}
#menupanel ul>li a:hover {
color: #FFF;
background: #3c4c55;
}
#menupanel li {
position:relative;
background:#05c597;
margin-bottom:15px;
}
#menupanel ul li img{
position:relative;
top:5.8px;
height:46%;
right:0px;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
#menupanel ul li a:hover img{
right:-50px;
}
#menupanel ul li ul{
position: absolute;
top: -10px;
left: 100%;
width: 916px;
display:none;
height:350px;
}
#menupanel ul li ul li{
height:350px;
background: #3c4c55;
top:10px;
}
#menupanel ul li a:hover ul{
display:block;
}
What you're doing in your code right now using #menupanel ul li a:hover ul is trying to target any list that are children of your link element. The list you're trying to target is however not a child but a sibling to your link element.
You can either use the + selector to target the sibling.
#menupanel ul li a:hover + ul{display:block;}
or you can put the hover state on the list element instead.
#menupanel ul li:hover ul{display:block;}
Either one will work
Fiddle
#menupanel{
margin-top:50px;
width:300px;
padding:0 75px;
clean:both;
}
#menupanel h1{
font-size:16px;
color:#FFF;
margin:10px auto;
text-align:center;
}
#menupanel h2{
text-align:center;
padding-top:30px;
color:#FFF;
}
#menupanel ul{
list-style: none;
margin: 0;
width: 300px;
}
#menupanel ul li a{
display: block;
margin: 0;
padding: 0 3px;
text-decoration: none;
color: #FFF;
background:#05c597;
height:54px;
text-align:center;
line-height:54px;
}
#menupanel ul>li a:hover {
color: #FFF;
background: #3c4c55;
}
#menupanel li {
position:relative;
background:#05c597;
margin-bottom:15px;
}
#menupanel ul li img{
position:relative;
top:5.8px;
height:46%;
right:0px;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
#menupanel ul li a:hover img{
right:-50px;
}
#menupanel ul li ul{
position: absolute;
top: -10px;
left: 100%;
width: 916px;
display:none;
height:350px;
}
#menupanel ul li ul li{
height:350px;
background: #3c4c55;
top:10px;
}
#menupanel ul li:hover ul{
display:block;
}
<div id="menupanel">
<ul>
<li>
PERFORMANCE<img src="images/menu.png" />
<ul>
<li><h2>PERFORMANCE</h2>
<p>Are you an artist working in the field of live audiovisual...</p>
</li>
</ul>
</li>
</ul>
</div>
The <ul> is not a child of , it's a sibling.
So instead of
#menupanel ul li a:hover ul {
display:block;
}
use the adjacent sibling selector +
#menupanel ul li a:hover+ul {
display:block;
}
The <ul> is a sibling of the <a>, not a child. Try:
#menupanel ul>li a:hover~ul {display:block}
Replace :
#menupanel ul li a:hover ul{
display:block;
}
With this :
#menupanel ul li a:hover + ul{
display:block;
}
read more : http://css-tricks.com/child-and-sibling-selectors/
HTML Code:
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
Admin <img src="" />
<ul>
<li>Adicionar Eventos</li>
<li>Actualizar Eventos</li>
<li>Eliminar Eventos</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
body{
padding:0;
margin:0;
overflow-y:scroll;
font-family:Arial;
font-size:18px;
}
#nav{
background-color:#333;
}
#nav_wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
#nav ul{
list-style-type:none;
padding:0;
margin:0;
position:relative;
}
#nav ul li{
display:inline-block;
}
#nav ul li:hover{
background-color:#333;
}
#nav ul li img{
vertical-align:middle;
padding-left:5px;
}
#nav ul li a,visited{
color:#ccc;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover{
color:#ccc;
text-decoration:none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul{
display:none;
position:absolute;
background-color:#333;
border: 5px solid #222;
border-top:0;
margin-left:-5px;
min-width:200px;
}
#nav ul ul li{
display:block;
}
#nav ul ul li a,visited{
color:#ccc;
}
#nav ul ul li a:hover{
color:#099;
}
I receive this: http://imgur.com/eMzuvfg
I want to put only Admin block visible and not the full header. Only one block black visible and in left side.
Someone can help me?
I think you want like this..
just replace the class from
#nav{
background-color:#333;
}
to
#nav{
width:100px;
background-color:#333;
}
Your question is confusing.. anyhow you need like this?
if no, please make your question little more detailed.
html
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
Admin <img src="" />
<ul>
<li>Adicionar Eventos</li>
<li>Actualizar Eventos</li>
<li>Eliminar Eventos</li>
</ul>
</li>
</ul>
</div>
</div>
css
body{
padding:0;
margin:0;
overflow-y:scroll;
font-family:Arial;
font-size:18px;
}
#nav{
background-color:#333;
}
#nav_wrapper{
float:left;
margin:0 auto;
text-align:left;
background-color:#333;
}
#nav ul{
list-style-type:none;
padding:0;
margin:0;
position:relative;
}
#nav ul li{
display:inline-block;
}
#nav ul li:hover{
background-color:#333;
}
#nav ul li img{
vertical-align:middle;
padding-left:5px;
}
#nav ul li a,visited{
color:#ccc;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover{
color:#ccc;
text-decoration:none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul{
display:none;
position:absolute;
background-color:#333;
border: 5px solid #222;
border-top:0;
margin-left:-5px;
min-width:200px;
}
#nav ul ul li{
display:block;
}
#nav ul ul li a,visited{
color:#ccc;
}
#nav ul ul li a:hover{
color:#099;
}
For a top menu of my website I am using a css file. The menu works fine for me but I noticed that on smaller screen the menu breaks down, that two or more item of the menu coming down for lack of space. I tried to modified the different parameter of the css but still it did not work. Can anyone please suggest me for the modification of the following css so that the menu works same in different resolution of devices.
CSS
body {
margin:0px;
}
#nav {
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 30px #5E5E5E;
position:fixed;
top:0px;
}
#nav > ul {list-style:inside none; padding:0; margin:0;}
#nav > ul > li {list-style:inside none; padding:5px; margin:0; float:left; display:block; position:relative;}
#nav > ul > li > a{ padding: 10px; outline:none; display:block; position:relative; padding:12px 20px; font: 1em/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#nav > ul > li > a:after{ content:''; position:absolute; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#nav ul li.has-sub:hover > a:after{top:0; bottom:0;}
#nav > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#nav > ul > li.has-sub:hover > a:before{top:19px;}
#nav ul li.has-sub:hover > a{ background:#2198bf; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#nav ul li.has-sub:hover > ul, #cssmenu_top ul li.has-sub:hover > div{display:block;}
#nav ul li.has-sub > a:hover{background:#2198bf; border-color:#3f3f3f;}
#nav ul li > ul, #cssmenu_top ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#nav ul li > ul{width:200px;}
#nav ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#nav ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
.title {
color:#FF0000;
padding-top: 8px;
font-family:verdana;
font-size:20px;
width:20px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.subtitle {
color:#FF0000;
font-family:verdana;
font-size:15px;
}
#navigation{
list-style-type:none;
}
li {
display:inline;
padding:10px;
}
#nav a{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover {
color:#BDBDBD;
}
#body {
width:98%;
margin:0px auto;
margin-top:80px;
font-family:verdana;
}
hr {
border:1px solid #262626;
}
.menu_extended{
position: fixed;
width: 100%;
height: 5px;
top: 48px;
left: 0px;
background-color: #CC0000;
box-shadow: 0px 1px 30px #5E5E5E;
}
In the body of my html page i am writting the following way for creation of menu:
<div id="nav">
<p class="title">
<span style="color:0000FF;"> </span>
</p>
<ul>
<li><a href="index.php" >Home</a></li>
<li>Reading</li>
<li>Multimedia</li>
<li><a href="test_home.php" >Test Yourself</a></li>
<li>Sit for Exam</li>
<li>Analysis</li>
<li>Tips And Tricks</li>
<li>About</li>
</ul>
</div>
Any help ?
Reponsive menu bar can easily be achieved by media queries.If you don't about them then seach it on google.I am providing you a demo url https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.
In this you have to apply css to your menu bar according to width of device
To make a Responsive menu bar and to target each devices. you can use #media queries.
// normal style
#header-image {
background-repeat: no-repeat;
background-image:url('image.gif');
}
// show a larger image when you're on a big screen
#media screen and (min-width: 1200px) {
#header-image {
background-image:url('large-image.gif');
}
}
// remove header image when printing.
#media print {
#header-image {
display: none;
}
}
I wish to add a transition to my current CSS dropdown menu.
I have my "transition: height ease-in-out 500ms;" code all ready to go, I just need to know where to add it.
How I have my menu setup is like so:
<ul id="nav">
<li>
About Us <img style="border:0;" src="/index_files/darrow.png" />
<ul id="accordion">
<li>Who We Are</li>
<li>Contact Us</li>
<li>Join Us For Worship</li>
<li>Meet Our Staff</li>
</ul>
</li>
</ul>
So, what I am wondering is where I would put my transition code in my .css file to affect the "accordion" section. (I can remove the id="accordion" section, that was just there from testing.
All help is appreciated, thank you.
EDIT: Here is the CSS:
#nav {
font-size:20px;
text-align:center;
position:relative;
z-index:500;
display:block;
margin-bottom:20px;
padding:0;
width:950px;
background:#33A1DE;
float:left;
border-bottom:none;
color:white;
-moz-box-shadow: 0px 5px 10px #333333;
-webkit-box-shadow: 0px 5px 10px #333333;
box-shadow: 0px 5px 10px #333333;
}
#nav a:visited, #nav a {
color:white;
}
#nav li a, #nav li {
float:left;
}
#nav > li {
line-height:2em;
width:20%;
list-style:none;
position:relative;
border-top:none;
border-right:1px solid white;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#nav > li.right {
line-height:2em;
width:20%;
list-style:none;
position:relative;
border-right:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#nav li a {
height:100%;
width:100%;
text-decoration:none;
background:#33A1DE;
}
#nav li a:hover {
background:#000000;
}
/* Submenu */
#nav li ul {
list-style:none;
width:100%;
display:none;
position:absolute;
left:0;
top:100%;
padding:0; margin:0;
}
#nav li ul:last-child {
border-bottom:1px solid white;
}
#nav li:hover > ul {
display:block;
}
#nav li ul li, #nav li ul li a {
float:none;
}
#nav li ul > li {
left:-1px;
text-align:center;
margin:auto;
position:relative;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
_display:inline; /* for IE6... God knows why */
}
#nav li ul li a {
display:block;
border:1px solid white;
border-bottom:none;
}
/* Sub-Submenu */
#nav li ul li > ul {
list-style:none;
display:none;
position:absolute;
}
#nav li ul li:hover ul {
border-left:1px solid white;
z-index:5;
left:0px;
top:0px;
left:100%;
width:200px;
}
#nav li ul li ul:last-child {
border-bottom:1px solid white;
}
#nav li ul li:hover ul.youth {
border-left:1px solid white;
z-index:5;
left:0px;
top:-100%;
left:100%;
width:200px;
box-sizing:border-box;
}
Start by deleting the display:none from to the accordion. Then specify a height to the accordion li elements as well as a transition type.
in the :hover state of the About us li, you specify the new height for the accordion li's.
DEMO
You add that directive on the same rule where the height of the menu changes (not the :hover state).
You'll have to provide us with more details if you want a more detailed answer.