CODEWITHSUNDEEP
htmlcssdrop-down-menumenu
Kenneth
Kenneth

Reputation: 19

Creating an interactive(?) nav with CSS?

I'm fairly new to HTML and CSS and I don't know the exact word for it, so I figured my quick sketch would help me communicate what I'm going for.

Image: enter image description here HTML

        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">CS/IS 101 Assignments</a></li>
                    <ul>
                        <li><a href="#">Puzzles</a></li>
                        <li><a href="#">Word</a></li>
                        <li><a href="#">Excel</a></li>
                        <li><a href="#">Access</a></li>
                        <li><a href="#">PowerPoint</a></li>
                    </ul>
                <li><a href="#">CS/IS 260 Assignments</a></li>
                    <ul>
                        <li><a href="#">Chapter 3</a></li>
                        <li><a href="#">Chapter 4</a></li>
                        <li><a href="#">Chapter 5</a></li>
                        <li><a href="#">Chapter 6</a></li>
                        <li><a href="#">Chapter 7</a></li>
                    </ul>
                <li><a href="#">Favorite Websites</a></li>
                <li><a href="#">Final</a></li>
                <li><a href="#">Midterm</a></li>
                <li><a href="#">About Me</a></li>
        </ul>
    </nav>

CSS for everything nav-related

.main-header nav{
background-color:#333333;
height:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.main-header nav ul{
list-style: none;
margin: 0 auto;
}

.main-header nav ul li{
float:left;
display:inline;
}

.main-header nav a:link, .main-header a:visited{
color:#FFF;
display:inline-block;
padding: 10px 25px;
height: 20px;
}

.main-header nav a:hover, .main-header nav a:active, .main-header nav .active a:link, .main-header nav .active a:visited{
background-color:#bc9c98;
text-shadow: none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.main-header nav ul li a{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Upvotes: 0

Views: 160

Answers (1)

Jack
Jack

Reputation: 9388

Here's a demo of the drop down navigation: http://codepen.io/anon/pen/iwuGI

Your mark-up and css were really close!

Mark up changes were minor. It required moving your nested UL element into the parent LI.

<li><a href="#">CS/IS 101 Assignments</a></li>
    <ul>
        <li><a href="#">Puzzles</a></li>
        <li><a href="#">Word</a></li>
        <li><a href="#">Excel</a></li>
        <li><a href="#">Access</a></li>
        <li><a href="#">PowerPoint</a></li>
    </ul>

to:

<li><a href="#">CS/IS 101 Assignments</a>
    <ul>
        <li><a href="#">Puzzles</a></li>
        <li><a href="#">Word</a></li>
        <li><a href="#">Excel</a></li>
        <li><a href="#">Access</a></li>
        <li><a href="#">PowerPoint</a></li>
    </ul>
</li>

Add CSS to hide the nested UL:

.main-header nav ul ul {
    display: none;
}

Override the parent CSS for the LIs (we don't need them floating!):

.main-header nav ul li ul li {
    float: none;
    display: block;
}

Show nested UL when we hover over parent:

.main-header ul li:hover > ul {
    display: block;
}

Upvotes: 1

Related Questions