Member Avatar for billionair

I have four list items in my <nav> bar: Home, Projects, Resume, Contact

Projects item has further five list items.

When I hover on "Projects", these items appear as a drop down block, but they are not aligned with the parent element.

/*Display Nav elements in row*/
nav > ul > li
{
    display: inline-block;
    background-color: #D2D4C9;

}


/*Hide child elements and fix position*/
nav > ul > li > div 
{
    display: none;
    position: absolute;
    visibility: hidden;
    z-index: 100;

}

/*Expand list on hover*/
nav > ul > li:hover > div
{
    display: block;
    visibility: visible;

}

/*Display child elements as block*/
nav > ul > li > div ul > li     
{
    display: block;

}




<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" href="index.css">
<title> My portfolio </title>
</head>


    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a>
                    <div>
                        <ul>
                            <li><a href="#">Proj1</a></li>
                            <li><a href="#">Proj2</a></li>
                            <li><a href="#">Proj3</a></li>
                            <li><a href="#">Proj4</a></li>
                            <li><a href="#">Proj5</a></li>
                        </ul>
                    </div>
            </li>

            <li><a href="#">Resume</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</html>

Here's the output I'm getting.

http://i.imgur.com/y2XO9dx.png

Edited by billionair
  • 2 Contributors
  • 1 Reply
  • 307 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by <M/>
Member Avatar for <M/>

Here, I tweaked and styled your menu just a bit (my OCD kicked in). Your code should look something like this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" href="index.css">
<title> My portfolio </title>
<style>
.site-navigation {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin: 40px;
}
.site-navigation ul {
  background: #CCC;
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.site-navigation li {
    color: #fff;
  background: #CCC;
    display: block;
    float: left;
    margin: 0 2px 0 0;
    padding: 25px 18px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
} 
.site-navigation li a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.site-navigation li:hover {
    background: #52a6df;
    cursor: pointer;
}
.site-navigation ul li ul {
    background: #52a6df;
    visibility: hidden;
    float: left;
  min-width: 150px;
    position: absolute;
  margin-top:25px;
    left: 0;
    z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
   visibility: visible;
}
.site-navigation ul li ul li {
    clear: both;
    padding: 5px 0 5px 18px;
  width: 100%;
}
.site-navigation ul li ul li:hover {
    background: #74b7e4;
}
</style>
</head>
  <nav id="navigation" class="site-navigation" role="navigation">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Projects</a>
      <ul class="dropdown">
        <li class="menu-item sub-menu"><a href="#">Proj1</a></li>
        <li class="menu-item sub-menu"><a href="#">Proj2</a></li>
        <li class="menu-item sub-menu"><a href="#">Proj3</a></li>
        <li class="menu-item sub-menu"><a href="#">Proj4</a></li>
        <li class="menu-item sub-menu"><a href="#">Proj5</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">Resume</a></li>
    <li class="menu-item"><a href="#">Contacts</a></li>
  </ul>
</nav>
</html>

Hope this helps!

commented: Thank you for this. I was actually trying to find what the problem was. I found it at last: I had not set the margin and padding as 0 for the "ul" element +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.