I have got a task to do horizontal menu from json file. I created json file. But while creating subchild the CSS is not working properly. I want the sub child menu as vertical.
css file is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#nav,
#nav ul {
list-style: none;
padding: 2px;
}
#menu {
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu ul li a:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
}
.nav-child {
width:160px;
display:block !important;
}
#menu ul li ul {
border-radius:0px;
border-color:#fff #ccc #ccc #ccc !important;
}
#menu ul li ul li:hover {
border:0px;
}
#nav {
float: left;
height: 25px;
}
#nav> li {
float: left;
}
#nav li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#nav ul {
position: absolute;
display: none;
z-index: 999;
}
#nav ul li a {
/*width: 80px;*/
}
#nav li:hover ul {
display: block;
}
#nav {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8 ;
}
#nav > li > a {
font-family: Verdana,Arial,sans-serif;
font-style: normal;
color:#787878 ;
font-weight: bold;
}
#nav > li > a:hover {
/*color: #000;*/
}
#nav ul {
background: #fff;
border:1px solid #C0C0C0;
border-radius:5px;
}
#nav ul li a {
color: #000;
}
#nav ul li a:hover {
background: #E0E0E0 ;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin: 0 116px !important;
position: absolute !important;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li:hover ul {
display: block !important;
}
How can i arrange the subchild values properly?
Try with this one: in this fiddle, maybe you want something like this.
.subchild-list {
margin:0; /*<-----make 0*/
position: absolute !important;
top:0; /*<-----0 from top*/
right:-66px; /*<-----gets outside from the .childlist li*/
}
.child-list li {
position:relative !important; /*<-----important*/
}
Change display:block to inline-block in .nav-child and do the same for .nav-subchild
.nav-child {
width:160px;
display:inline-block !important;
}
.nav-subchild{
display: inline-block !important;
}
DEMO
Related
While trying to style my html with CSS i have to use an LI and i am getting trouble with it.
If the Html or js is need i will provide it asap.
The error i am getting is at the "LI" every time
The exact error i am getting is "property value expectedcss(css-propertyvalueexpected)"
#menu{
list-style:none;
padding: 0;
margin: 0;
li: {
display : block;
border-right: 1px solid #fff;
background: #E7E7E7;
color: #3B3B3b;
text-decoration:none;
padding:0 10px;
float:left
padding-left:0
position:relative
line-height: 4.5em
width: 10em
text-align: center
&:hover{
background-color: #3d6fc3;
background-image: -webkit-linear-gradient(left,#4577cb,#3264b6);
background-image: -o-linear-gradient(left,#4577cb,#3264b6);
background-image: -moz-linear-gradient(left,#4577cb,#3264b6);
background-image: -ms-linear-gradient(left,#4577cb,#3264b6);
background-image: linear-gradient(left,#4577cb,#3264b6);
color:#fff;
}
ul {
position:absolute;
}
a{
color: #3B3B3B;
text-decoration:none;
&:hover {
color:#fff;
}
}
}
ul {
border-top:1px solid #fff;
list-style:none;
padding:0;
margin:0;
li {
ul {
margin-top: -73px;
margin-left: 170px;
}
}
}
#drop-down{
display:none;
}
}
I want to hide sidebar when mouse cursor goes on menu bar which is in navigation bar to hide the sidebar.
I tried to hide it many ways but it did not worked for me so looking for any alternative.
Side should be hide once the mouse curser is on the menu bar
Here is my CSS code :
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.navbar {
width: 100%;
height: 78px;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
text-align: center;
margin-inline-start: 45px;
padding: 26px;
color: white;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 150px;
top: 78px;
height: 100%;
background: #4b4276;
padding: 0px 0px;
position:fixed;
transition: all 0.5s ease ;
}
.wrapper .sidebar ul li{
padding: 25px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(15, 3, 85, 0.05);
text-align: center;
transition: 0.3s;
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 45px;
}
.sub-menu-1{
display: none;
}
.wrapper .sidebar ul li:hover .sub-menu-1 {
display: block;
position: absolute;
left: 150px;
width: 250px;
top: 0px;
height: 92%;
border-radius: 2px;
box-shadow: 2px 2px 10px ;
background-color:#ffffff;
}
.wrapper .sidebar ul li .dropdown{
position: relative;
}
.wrapper .sidebar ul li:hover{
background-color:#d59bf6 ;
}
.wrapper .sidebar ul li:hover a{
color: rgb(70, 9, 105);
}
tried to hide the side bar but was unable to do so
I have created navigation menu, when I move mouse hover on the navigation item, Navigation getting up's and down's, In the below image you can find without mouse over
When I move mouse over on navigation it became like this: can any one help me?
css :
#navigation {
/* background: #414445 url(../images/navigation/bg.png) repeat-x 0 0; */
clear: both;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
float: right;
top: -45px;
width: 850px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 3px;
float: right;
}
.ie7 #navigation ul {
padding: 2px;
}
#navigation li, #navigation a {
display: inline-block;
}
.ie6 #navigation li, .ie7 #navigation li, .ie6 #navigation a, .ie7 #navigation a {
display: inline;
zoom: 1;
z-index: 200;
}
#navigation li {
color:#000;
position: relative;
vertical-align: top;
margin-left: 20px;
}
#header_navigation {
top: 22px;
}
#navigation a {
color: #FFF;
margin: 0 1px;
text-decoration: none;
}
.ie7 #navigation a {
padding: 4px 15px;
}
#navigation .aui-dd-drop a {
cursor: move;
}
/*
#navigation .selected a, #navigation a:hover, #navigation a:focus, #navigation .child-menu li a, #navigation .aui-dd-dragging, .lfr-navigation-proxy {
background: #313334;
border-bottom: #fff solid 2px;
outline: 0;
text-shadow: -1px -1px #000;
}
#navigation li:hover{
border-bottom: #000 solid 2px;
} */
#navigation li:hover .child-menu {
background: #188091;
display: block;
position: absolute;
width: 200px;
z-index: 200;
}
.ie6 #navigation li.hover .child-menu {
background: #1E2529;
display: block;
position: absolute;
width: 200px;
z-index: 200;
}
.ie6 #navigation li.hover .child-menu, .ie7 #navigation li:hover ul.child-menu {
left: 0;
top: 25px;
}
#navigation .child-menu {
display: none;
}
#navigation .child-menu li {
border-width: 0 0 1px;
display: block;
float: none;
margin: 0;
height: 25px;
}
#navigation .child-menu li a {
cursor: pointer !important;
}
.ie7 #navigation .child-menu li a {
zoom: 1;
}
I have upgraded from Foundation 4 to Foundation 5, and I am trying to set up a custom break point in the top bar without using Sass.
In foundation 4 you were able to change the following css code in the foundation.css file:
.top-bar-js-breakpoint {
width: 48em !important;
...
}
#media only screen and (min-width: 48em) {
...
}
But this isn't possible with Foundation 5, atleast I am not able to find the piece of CSS or JS code to change it.
I have also tried redownloading a new custom foundation installation with the TOP BAR BREAKPOINT set to 9999em, which just does not work. Even after removing all previous files and code.
This simple problem is driving me nuts, so it would be great if someone would put me out my misery with a simple sollution, please!
Thanks in advance.
Find the meta.foundation-mq-topbar css selector in your code and change width attribute value to 48em or any other size you want.
Another solution:
Foundation separate components media query from each other, so you can change breakpoint for each components. Look at this code:
#media only screen and (min-width: 40.063em) {
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
.top-bar input,
.top-bar .button {
font-size: 0.875rem;
position: relative;
top: 7px; }
.top-bar.expanded {
background: #333333; }
.contain-to-grid .top-bar {
max-width: 62.5em;
margin: 0 auto;
margin-bottom: 0; }
.top-bar-section {
-webkit-transition: none 0 0;
-moz-transition: none 0 0;
transition: none 0 0;
left: 0 !important; }
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline; }
.top-bar-section ul li {
float: left; }
.top-bar-section ul li .js-generated {
display: none; }
.top-bar-section li.hover > a:not(.button) {
background: #272727;
color: white; }
.top-bar-section li a:not(.button) {
padding: 0 15px;
line-height: 45px;
background: #333333; }
.top-bar-section li a:not(.button):hover {
background: #272727; }
.top-bar-section .has-dropdown > a {
padding-right: 35px !important; }
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
.top-bar-section .has-dropdown.moved {
position: relative; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: none; }
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block; }
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -2px;
right: 5px; }
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%; }
.top-bar-section .dropdown li a {
color: white;
line-height: 1;
white-space: nowrap;
padding: 12px 15px;
background: #333333; }
.top-bar-section .dropdown li label {
white-space: nowrap;
background: #333333; }
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0; }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
border-bottom: none;
border-top: none;
border-right: solid 1px #4d4d4d;
clear: none;
height: 45px;
width: 0; }
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
.top-bar-section ul.right li .dropdown {
left: auto;
right: 0; }
.top-bar-section ul.right li .dropdown li .dropdown {
right: 100%; }
.no-js .top-bar-section ul li:hover > a {
background: #272727;
color: white; }
.no-js .top-bar-section ul li:active > a {
background: #2ba6cb;
color: white; }
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block; }
}
You have to find the above code and just change this media query for changing top bar breakpoint.
Okay, I think I have the CSS changes pinned after the SCSS compiles.
Search for .top-bar in your CSS and look for the entry similar to the below, and change "981px" as needed:
#media only screen and (min-width: 981px) {
.top-bar {
background: linear-gradient(to bottom, #7d7d7d 0%, #646464 100%);
*zoom: 1;
overflow: visible
}
Search for meta.foundation-mq-topbar in your CSS and change "981px" as needed:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width: 981px)/";
width: 981px
}
Basically what i did to make it work after reading the solution from Parhum. Search for the
meta.foundation-mq-topbar. There should be a width corresponding to it, in my case which is the 40.063em.This one has to be changed. Now, look for the corresponding media query (i.e. #media only screen and (min-width:40.063em)) Change BOTH of the width in both of the line. It should be working fine now.
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.00em)/";
width: 64.00em !the width of this must change; }
#media only screen and (min-width: 64.00em) {
.top-bar {
background: #333333;
I have a menu in a joomla template, when you hover a link the link highlights. I would like to know how to get the parent to stay that way when hovering over the child (sub-menu).
My current Code: HTML
<div id="navigation">
<ul class="menu ">
<li class="item-101 current active">
Home</span><span class="menudesc"></span></li>
<li class="item-107 deeper parent">Jamie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-108">Photos</span> <span class="menudesc"></span></li>
<li class="item-109">Thoughts</span> <span class="menudesc"></span></li></ul></li>
<li class="item-110">Mike</span> <span class="menudesc"></span></li>
<li class="item-111">John</span> <span class="menudesc"></span></li>
<li class="item-112 deeper parent">Carrie</span> <span class="menudesc"></span><i class="icon-angle-down"></i>
<ul class="sub-menu"><li class="item-113">Pictures</span> <span class="menudesc"></span></li>
<li class="item-114">Thoughts</span> <span class="menudesc"></span></li>
<li class="item-115">Make-up</span> <span class="menudesc"></span></li>
<li class="item-116">books</span> <span class="menudesc"></span></li></ul></li>
<li class="item-117">Contact</span> <span class="menudesc"></span></li></ul>
</div>
The CSS:
/* Navigation */
#navbar-wrap { padding: 0px; margin:0 0 10px 0; float:right!important}
#navbar { height: 55px; }
#navbar.row { margin-bottom: 0 }
#navigation { padding:0 10px;}
#navigation ul.menu { float:right}
#navigation .menu { margin: 0; padding: 0; list-style: none;}
#navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; }
#navigation .menu > li { display: block; float: left; }
#navigation .menu > li ul {}
#navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; }
#navigation .menu ul ul { left: 100%; top: 0; }
#navigation .menu ul ul li { width: 100% }
#navigation .menu li { position: relative }
#navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
#navigation .menu a { display: block; position: relative; padding: 20px 10px 0 10px; font-family:'Oswald',Arial, Helvetica, sans-serif;}
/* current item */
#navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover{ color: #fff; background:#67ABC9;}
#navigation .menu > .active > a, #navigation li.active > a {color: #fff }
#navigation .menu > li { margin-right: 5px; padding:0; }
#navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; }
/*drop-down styles*/
#navigation .menu ul { border-top: none; background: #F5F5F5; border: 1px solid #ccc; min-width:200px;
box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2)}
#navigation .menu li:hover ul { margin-top: 0; }
#navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; }
#navigation .menu ul li { border-bottom: 1px solid #ccc }
#navigation .menu ul li:first-child { }
#navigation .menu ul li:last-child { border: 0 }
#navigation .menu ul li > a:hover { color: #67ABC9; background:none;}
#navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; }
#navigation .selector { display: none }
#navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;}
#navigation ul.sub-menu a { font-size:12px;}
#navigation ul.sub-menu .active > a { color:#67ABC9}
#navigation i { text-align:right}
#menu-icon {display: none;}
#slide-wrap a:hover{ color:#fff}
Your stylesheet is messy, you have lots of different rules with the same selector, join them; and delete unused ones.
I have cleaned the first part, finish the cleaning yourself.
About your question, basically you need
#navigation > .menu > .active > a,
#navigation > .menu > li:hover > a{
color: #fff;
background:#67ABC9;
}
Note the use of li:hover > a instead of li> a:hover.
Demo
I think this is solution you are looking for.
http://jsfiddle.net/pzaF8/
#navigation .menu > LI:hover{background-color: #67ABC9; color: #FFF}
I add only this line o your css, I didn`t edit yours cause it looks messy.