How to arrange subchild in the horizontal menu


Tags: javascript,jquery,html,css,json

Problem :

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?



Solution :

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*/
 }

    CSS Howto..

    how to add dots (…) with the same width?

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]

    How to Make Button Tag Only Show Image Inside of it

    How to check if a TR contains a TD with a specific CSS class with jquery?

    How to visually re-order elements in a scrolling dropdown input div?

    How get dimension of HTML shadow element via JavaScript

    How to prevent divs from overlapping?

    How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?

    css - How to remove padding next to adjacent links?

    How do I apply an image to background using inline CSS?

    How do I alter my Jquery slideshow to change size in different screen resolutions

    How can I change styling and test for every page reload [closed]

    How to force CSS @media style from JS regardless of screen size?

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    How to change css style of Kendo Combobox

    CSS How to display an image in the size of a / text line

    How to remove space between bannner and content in wordpress theme?

    how can i add class to errorsummay without remove header message

    How can I debug twitter bootstrap v4-alpha grid? col-sm-offset-* not working

    How can one change the background image of a label using css with javascript

    how to make Sections in one line?

    How would YOU do this: Tables or CSS? [closed]

    How to use an arrow for slideToggle indicator?

    CSS element class - Height differs based on content, how to fix?

    How to include several nested CSS classes into rails .erb file?

    How to I apply a style to only the first row (matching a class) of a table using pure css?

    How to make css transform-origin property work in IE7 and IE8?

    How can I style the current (today's date) in bold font?

    How to move some text down in a li tag?

    How to test css with media queries