STREETS IN TIME PROJECT: Nested menu bar

As the Streets In Time project grows, I initially intend to extend to include images for Swindon and Sisak (Croatia) – 2 places where I have the opportunity to collect “then and now” images.  Ideally I would love for users from other locations to submit images of their towns and cities also.  I therefore need to add a drop down menu from the navigation bar for multiple locations.

Until now, I had only created singlular <li>’s in a nav bar – I therefore needed to work out how to create the desired drop-down.  For this, I turned to my well thumbed XHTML / CSS for dummies book, and produced the following code:

HTML:

<ul>
    <a href = "sit001.html"> <li> Home </li> </a>
    <a href = #> <li> Locations 
        <ul>
          <li> Brighton </li>
          <li> Swindon </li>
          <li class = "last"> Sisak </li>
       </ul>
      </li> </a>
    <a href = #> <li> About </li> </a>
 </ul>

CSS:

header ul {
 position:relative;
 list-style-type:none;
 color:#CCC;
 margin-left:-40px;
}
header ul li {
 float:left;
 width:120px;
}
header ul li ul {
 margin-top:9px;
}
header ul li ul li {
 float:none;
 height:30px;
 background-color:#434343;
 padding-top:10px;
 border-top:#505050 solid 1px;
 display:none;
 font-size:12px;
}
header ul li ul li.last {
 border-radius:0px 0px 8px 8px;
}
header ul li:hover > ul li {
 display:inline-block;
}
header ul li:hover {
 color:white;
}
header ul li ul li:hover {
 background-color:#555555;
}

 

The nested <li>’s are hidden by default and are changed to be displayed when the parent <li> is hovered over.

You can see that I have added a class called ‘last’ to the final <li> – this enables ,me to add a border-radius to the bottom of the menu that drops down

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s