How can I make a drop down menu without changing the width of the main menu item?


Tags: html,css,navbar,nav

Problem :

I am new to HTML and CSS.

I am trying to make a navigation bar with a drop down menu.

I created navbar. But the width of the main menu item is changing with the sub menu Item.

How can I stop changing the width of the main Menu Item. here main menu item is "SCHOOLING".

I don't want to change the width of SCHOOLING.

Before change

enter image description here

After change

enter image description here

html code for NavBar

<!DOCTYPE html>
<html>
<head>
    <title>Navigation</title>
    <link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav id="navbar" class="bold">
        <ul>
            <li style="border-top-left-radius:10px;border-bottom-left-radius:10px;"><a href="index.html"  style="padding-left:21px;">HOME</a></li>
            <li><a href="subject.html" >SCHOOLING</a>
                <ul>
                    <li><a href="#">HIGH SCHOOL</a></li>
                    <li><a href="#">HIGHER SECONDARY</a></li>
                </ul>
            </li>

            <li><a href="subject.html">ENGINEERING</a></li>
            <li><a href="subject.html">UG | PG</a></li>
            <li><a href="subject.html">SPECIAL CLASSES</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li style="border-right:none;"><a href="contact.html">CONTACT US</a></li>
        </ul>
    </nav>
</body>
</html>

CSS code For the NavBar

* {
    margin: 0;
    padding: 0;
    font-family: Courier New, monospace;
    }

.fleft {
    float: left;
   }
.fright {
    float: right;
}
.clear {
    clear: both;
    }

.bold {
    font-weight: bold;
    }

/* NAV BAR */

#navbar {
   background-color: #333; 
    margin:10px;
    height: 40px;
    color: white;
    border-radius: 10px;
} 

#navbar ul {
    list-style: none;
    overflow: hidden;

}

#navbar ul li {
    float: left;
    border-right: 2px solid #dede0e;
    font-size: 1.5em;

}
#navbar ul li a {
    color: white;
        display: block;
    text-decoration: none;
        padding: 6px 10px;

}
#navbar ul li:hover {
        background-color: #000000;


}

/* DROP DOWN MENU */

#navbar ul ul {
    display: none;
    list-style: none;

    color: blueviolet;
    background: #a80000;

}
#navbar ul ul li {
    float: none;
    font-size: 1em;
    border: none;
    position: relative;
    top: 100%;
    left: 0;
}
#navbar ul ul li a {
    border-right: none;
    padding: 0 20px;
}
#navbar ul li:hover > ul
{
    display: block;
}


Solution :

You can achieve this by setting the position of the dropdown menu to absolute.

#navbar ul ul {
    display: none;
    list-style: none;
    color: blueviolet;
    background: #a80000;
    position: absolute;
}

    CSS Howto..

    How can I have a table with a set height but auto height cells

    (jQuery) How to animate the elements inside a scrollable div when they come into sight on scroll?

    How to find absolute path to @font-face fonts with Firebug?

    how to make target link work giving different css properities

    How do I increase the spacing between different parts of blockquotes with CSS?

    How to show transition of an element that is expanding over nearby content?

    How can I absolutely position a related image_tag?

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    How could I add a header to a HTML page via CSS?

    CSS: how to address Samsung Android browser?

    How to include display:block in css code that includes pseudo element 'before'

    How can I make the first letter push itself into the paragraph like a newspaper style

    how to use tinymce content.css in rails

    Asp.Net how to apply a css style to all the control of it's kind

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    bootstrap css, how to make full width div inside container

    Show/Hide elements in a table

    How to insert css code in php?

    How do I refactor my CSS? [duplicate]

    How to apply a css class for jqGrid height property setGridHeight?

    How to wrap a div vertically and then horizontally

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    How to properly use CSS in GWTP?

    How to change css dynamic by javascript

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    Make nav dropdown show above all other divs

    How to calculate effective CSS for a DOM node using PHP

    How to turn off carousel when resized?

    How to show hidden div in the same line as the paragraph text?

    How to get a 2 column widget area defined in CSS?