CODEWITHSUNDEEP
htmlcss
Devarsh Bhatt
Devarsh Bhatt

Reputation: 74

Having padding issue between elements in DropDown Menu

I am currently having issue in the Drop-Down Navigation menu created using HTML and CSS but later when i tried to apply padding between the list of a UL elements, I found that padding is different in all the elements for ex. The student box has 1px gap on all the sides (if you zoom in a little bit you will see it) and the rest of the list has more or less padding than the student one.

I attached the snippet for both the CSS and HTML code below:

* {
    margin: 0;
    padding: 0;
}

body {
    background: #34495e;
}

nav {
    width: 100%;
    height: 60px;
    background-color: rgba(49, 45, 45, 0.8);
    text-align: center;
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a {
    display: block;
    font-family: sans-serif;
    color: #222;
    font-size: 20px;
    padding: 18px 14px;
    text-decoration: none;
}

nav ul li ul {
    display: block;
    position: absolute;
    background-color: rgba(49, 45, 45, 0.8);
    padding: 1px;
}

nav ul li ul li a {
    padding: 8px 32px;
}

nav ul li a:hover {
    background-color: #2ecc71;
}

nav ul li ul li a:hover {
    background-color: #2ecc71;
}
<html>
    <head>
        <title>Dropdown Menu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Registration</a>
                    <ul>
                        <li><a href="#">Student</a></li>
                        <li><a href="#">Bus</a></li>
                        <li><a href="#">Route</a></li>
                        <li><a href="#">Driver</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </body>
</html>

Help would be greatly appreciated.

Upvotes: 0

Views: 293

Answers (2)

Gaurav Rana
Gaurav Rana

Reputation: 445

remove padding from nav ul li ul and add width:100% for nav ul li ul li.

* {
    margin: 0;
    padding: 0;
}

body {
    background: #34495e;
}

nav {
    width: 100%;
    height: 60px;
    background-color: rgba(49, 45, 45, 0.8);
    text-align: center;
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a {
    display: block;
    font-family: sans-serif;
    color: #222;
    font-size: 20px;
    padding: 18px 14px;
    text-decoration: none;
}

nav ul li ul {
    display: block;
    position: absolute;
    background-color: rgba(49, 45, 45, 0.8);
}
nav ul li ul li {
    width:100%;
}

nav ul li ul li a {
    padding: 8px 32px;
}

nav ul li a:hover {
    background-color: #2ecc71;
}

nav ul li ul li a:hover {
    background-color: #2ecc71;
}
<html>
    <head>
        <title>Dropdown Menu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Registration</a>
                    <ul>
                        <li><a href="#">Student</a></li>
                        <li><a href="#">Bus</a></li>
                        <li><a href="#">Route</a></li>
                        <li><a href="#">Driver</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </body>
</html>

Upvotes: 0

Joykal Infotech
Joykal Infotech

Reputation: 1876

Please add width: 100%; to dropdown menu li. Like:

* {
    margin: 0;
    padding: 0;
}

body {
    background: #34495e;
}

nav {
    width: 100%;
    height: 60px;
    background-color: rgba(49, 45, 45, 0.8);
    text-align: center;
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a {
    display: block;
    font-family: sans-serif;
    color: #222;
    font-size: 20px;
    padding: 18px 14px;
    text-decoration: none;
}

nav ul li ul {
    display: block;
    position: absolute;
    background-color: rgba(49, 45, 45, 0.8);
    padding: 1px;
}
 

nav ul li ul li {
  width: 100%;
}
nav ul li ul li a {
    padding: 8px 32px;
}

nav ul li a:hover {
    background-color: #2ecc71;
}

nav ul li ul li a:hover {
    background-color: #2ecc71;
}
<html>
    <head>
        <title>Dropdown Menu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Registration</a>
                    <ul>
                        <li><a href="#">Student</a></li>
                        <li><a href="#">Bus</a></li>
                        <li><a href="#">Route</a></li>
                        <li><a href="#">Driver</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </body>
</html>

Upvotes: 1

Related Questions