How to change the style of horizontal menu


Tags: css

Problem :

I have got a task to do horizontal menu. While creating the menu i got a problem with the style.When we are hovering the menu it is jumping and also the sub child menu is comes at different position depending on the size of the text. My css file is

 #wrapper {
     width:100%;
     height:500px;
 }
 h2 {
     color:#787878;
 }
 #menu, #menu ul {
     list-style: none;
     //padding: 2px;
 }
 #nav{
     border-bottom: 1px solid #CCCCCC;
     border-spacing: 0;
     display: table;
     float: left;
     height: 25px;
     width: 100%;
 }
 #nav ul {
     margin: 0;
     padding: 0;
 }
 #nav > ul > li:hover {
     background: none repeat scroll 0 0 #FFFFFF;
     border-color: #ccc #ccc #FFFFFF;
     border-style: solid;
     border-width: 1px;
     padding-bottom: 0;
     border-radius:1px;
 }
 .menu-child {
     width:160px;
     display:block !important;

 }
 #nav ul li ul li:hover {
 }
 #nav ul li ul :hover { 
 }
 #menu {
     float: left;
     height: 25px;
 }
 #menu> li {
     float: left;
 }
 #menu li a {
     display: block;
     height: 2em;
     line-height: 2em;
     padding: 0 1.5em;
     text-decoration: none;
 }
 #menu ul {
     position: absolute;
     display: none;
     z-index: 999;
 }
 #menu ul li a { 
 }
 #menu li:hover ul {
     display: block;
 }
 #menu {
     font-family: Arial;
     font-size: 12px;
     //background: #F8F8F8;
 }
 #menu > li > a {
     font-family: Verdana, Arial, sans-serif;
     font-style: normal;
     color:#787878;
     font-weight: bold;
 }
 #menu > li > a:hover {
     color: #000;
 }
 #menu ul {
     background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
 }
 #menu ul li a {
     color: #000;
 }
 #menu 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;

     position: absolute !important;
     top:0;
     right:-87px;
     //border-color: #ccc #FFFFFF #ccc #FFFFFF;
 }
 .child-list ul {
     display: none !important;
     position: absolute !important;
     z-index: 999 !important;
 }
 .child-list li {
     position:relative !important;

 }
 .child-list li:hover ul {
     display: block !important;
 }

.child-list li{

    border-left:1px solid #C0C0C0; 
    border-right:1px solid #C0C0C0;
}

.child-list ul{
    border-top:1px solid #C0C0C0; 
    border-bottom:5px solid #C0C0C0; 
}

.child-list{
    border-bottom:5px solid #C0C0C0; 
}
.nav-subchild
{
    border-color: #ccc #FFFFFF #ccc #FFFFFF;


}

You can see my code from http://jsfiddle.net/ucpcA/1/ How can i solve this problem?



Solution :

Add to css this:

li {border: 1px solid #fff;}

I tried it in fiddle and it solved "jumping"

//Edit

The main idea is to set border to the top li elements so when you add additional border with color it will not jump

//Edit 2 to solve your 2nd problem

To sovle your 2nd prbolem put this line

 .subchild-list {
 margin:0;
 right:-150px;
 position: absolute !important;
 top:0; }

#menu ul li  {width: 150px;}

It is just an example so you will see what it does. Put there the ewidth which you really need.


    CSS Howto..

    How do you disable horizontal scrolling on a webpage?

    HTML/CSS How to apply CSS to “a” with custom data attribute?

    How can I create a footer/toolbar in an iPhone web app?

    Css how to replace block after click button

    How to morph multi-part css properties with Mootools Fx?

    How to position label text with css

    How can I determine the background image URL of a div via JavaScript?

    How to get the kendo NumericalTextBox to share the width of a table cell the same way the kendo DropDownList does?

    How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?

    How to apply advanced styling for all portlets of one kind

    How to use resolution relative css files?

    How to Change the hover image in CSS

    How to add next / previous buttons to Surface tablet touch-slideshow?

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    How to hide div on swipe in Angular

    How to add sub-menu (css) under actual sub-menu in WordPress

    How do I resize the border of the body as the window resizes in CSS

    how to remove and add classes using same function? [closed]

    How to overlay a play button over a thumbnail image using only CSS

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

    How to add css in php file? [closed]

    how to ajust the background pic according to outer div in css

    How to set the specific prefix for file-loader in webpack?

    how to make a css “if opera,not…”

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    How to add a CSS table next to my google map?

    How to add CSS class to asp.net from code behind [closed]

    How to use easeOutBounce animiation on display block?

    How can I achieve the mouseover effect like on wikipedia?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?