CODEWITHSUNDEEP
htmlcssdrop-down-menu
user3043645
user3043645

Reputation: 31

Navigation Menu - Border Radius & Drop-Down Menu Issues

This is my first attempt at creating a drop-down menu so please excuse any poor coding.

I would like a 10px border radius which appears to have only worked on the right-hand side of the navigation menu. The radius has not been applied to the left-hand side. What would I need to do to correct this?

The drop-down menu does not work properly either. There is whitespace below be menu. This does not allow for the mouse to hover over the sub-menu links. It would appear that this problem is caused by the top margin for nav ul. I would like space between the top of the page.

Thanks in advance. 

<!DOCTYPE HTML>

<html>

    <head>
        <title>Simple Drop Down Menu</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style2.css">
    </head>

    <body>

    <div class="wrapper">

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                    </ul>
                </li>
                <li><a href="#">Content Management</a>
                    <ul>
                        <li><a href="#">Joomla</a></li>
                        <li><a href="#">Drupal</a></li>
                        <li><a href="#">WordPress</a></li>
                        <li><a href="#">Concrete 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a>
                    <ul>
                        <li><a href="#">General Enquiries</a></li>
                        <li><a href="#">Ask me a Question</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

    <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    </div>

    </body>

</html>

header, div, footer, aside, nav, article, figure, figcaption {
    display: block;}
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {  
    margin: 0; padding: 0; border: 0; outline: none;} 
.wrapper{
    width: 960px; 
    margin: 0px auto;}
nav{
    height: 38px; 
    font-family: Verdana;
    background-color: #196CE8;
    border-radius: 10px;}
nav ul {
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
    margin-top: 20px} 
nav li {
    float: left;
    border-right: 1px solid #ffffff;
    }
nav li ul {
    display: none;} 
nav li a { 
    display: block; 
    background: #196CE8; 
    padding: 8px 15px;
    text-decoration: none; 
    color: white;} 
nav li a:hover {
    background: #1F3D99;}   
li:hover ul {
    display: block; 
    position: absolute;} 
li:hover li {
    float: none;} 
li:hover a {
    background: #196CE8;} 
li:hover li a:hover {
    background: #1F3D99;} 
.main{
    clear: both;}
p{
    padding-top: 30px;}

Upvotes: 0

Views: 3259

Answers (1)

Serlite
Serlite

Reputation: 12258

I hope this answer is still helpful for you.

As a previous answer noted, the reason why the left corners of the <nav> don't appear rounded is because the navigation links inside it don't have rounded corners, but do have a background colour. As a result, the background in the corners of the left-most navigation link overflows out of the <nav>, covering its rounded corners.

With regards to the extra white space that makes the dropdowns unusable, it's because you set a CSS style of:

nav ul{
    margin-top: 20px;
}

This margin not only affects the <ul> elements that are immediate children of the <nav>, but also all subsequent children - including the dropdown <ul> elements, which pushes them down and creates the big gap.

There are undoubtedly a few ways to solve this, so feel free to try out different solutions. Here's one way I could think of, by modifying a couple of your existing style definitions:

nav {
    height: 38px;
    font-family: Verdana;
    background-color: #196CE8;
    border-radius: 10px;
    padding-left:10px;
}

nav li ul {
    margin: 0px;
    display: none;
}

Here's a JSFiddle to show you what this achieves. Hope this is what you were looking for! If not, let me know and I'll be happy to help further. Happy coding!

Upvotes: 2

Related Questions