CODEWITHSUNDEEP
cssdrop-down-menunavigationnav
Pat
Pat

Reputation: 63

Responsive Navigation Dropdown Menu

I can't seem to move the dropdown menu below the navigation. I've attempted a few different ways to make this happen, but I get confused with inline-block vs float and other techniques.

I've made a fiddle here:

jsfiddle.net/p1mrtuex/

As you can see, the dropdown menu pulls up to the side of the "portfolio" link on hover. I'd like it to be listed below the link for both the wide and narrow viewports.

Thanks in advance.

Upvotes: 0

Views: 956

Answers (3)

IMI
IMI

Reputation: 2469

I recommend doing something like this with the mobile styles first.

    $('.handle').on('click', function(){
        $('nav > ul').toggleClass('showing');
    });
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

header {
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}

a {
    text-decoration: none;
    color: inherit;
}

nav ul {
    background-color: #43a286;
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
    visibility:hidden;
    height:0;
    max-height:20em;
    overflow:scroll;
}
nav ul li a {
    box-sizing: border-box;
    display:block;
    padding: 1.2em;
    text-align: left;
    line-height:1.2em;
}
.showing {
    height:auto;
    visibility:visible;
}

nav ul li:hover {
    background-color: #399077;
}

nav ul li:hover ul {
    visibility: visible;
    height:auto;
    background-color:green;
}

.handle {
    background: #005c48;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 20px;
    cursor: pointer;
    color: white;
}

.handle img {
    display: inline-block;
    width: 40px;
    float: left;
    margin-left: 15%;
    margin-top: 10px;
}

@media only screen and (min-width: 700px) {
    .handle {
        display: none;
	}

    nav ul {
         overflow:visible;
    }

	nav > ul {
        height:auto;
        visibility:visible;
        text-align:center;
        margin:0 auto;
	}
    
    nav > ul > li {
        display:inline-block;
        position:relative;
    }

	nav > ul > li > ul {
        position:absolute;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <header>
    <div class="logo">
        <a href="#">LOGO GOES HERE</a>
    </div>
</header>
<nav>
    <ul> 
        <li><a href="#" alt="portfolio" >home</a></li>
        <li><a href="#" alt="portfolio" >portfolio</a>
            <ul>
                <li><a href="#" alt="paintings" >paintings</a></li>
                <li><a href="#" alt="drawings" >drawings</a></li>
                <li><a href="#" alt="photography" >photography</a></li>
            </ul>
        </li>
        <li><a href="#" alt="about the artist" >about</a></li>
        <li><a href="#" alt="contact information" >contact</a></li>
    </ul>
    <div class="handle">
        <h4>menu</h4>
    </div>
</nav>

Upvotes: 1

dmdewey
dmdewey

Reputation: 199

changing the "nav ul li:hover ul" to display:block should clear it.

nav ul li:hover ul {
    display: block;
}

Upvotes: 1

Abbas Zahid
Abbas Zahid

Reputation: 177

I am not sure if you want to do something like this but try this: menu

  • home
  • portfolio
    • paintings
    • drawings
    • photography
  • about
  • contact

`http://jsfiddle.net/p1mrtuex/`

Upvotes: 1

Related Questions