Question

When trying to add an box with content inside it on a menu on a hover “drop down menu”, it does something like this:

_{(source: gyazo.com)}

I want the drop down to popup when I hover on the categories menu item.

This is the code I used for it:

       <div class="secondheader">

      <div class="container">

               <div class="span12">

                          <ul class="nav6">

                          <li><a href="#">Home</a></li>

                          <li class="dropdown1"><a href="#">Categories</a> </li>

                          <li><a href="#">Buy</a></li>

                          <li><a href="#">Sell</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          </ul>

                          </div>

               </div>

       </div>

</div>    

The CSS:

.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}    

.nav6  {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}

.nav6  li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}

.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}

.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}

I’ve tried using tutorials but I don’t really understand on how to make the same thing for my layout I mean it has different ways and classes.

Answer 1

Do you want something like http://jsfiddle.net/b76Qc/?

Edit:

In your case the submenu is horizontal because you use descendant selectors instead of child selectors:

replace .nav6 li with .nav6>li and .nav6 li ul with .nav6>li>ul

See my jsfiddle if you want the complete code.

Edit 2:

If you want each element to have a different background,

<li class="dropdown1"><a href="#">Categories</a>
    <ul>
        <li style="background:red"><a href="#">Buy</a></li>
        <li style="background:blue"><a href="#">Sell</a></li>
        <li style="background:green"><a href="#">Forums</a></li>
        ...
    </ul>
</li>

But can you provide a link to your site instead of images? The square shown in http://gyazo.com/35835f003d0d8b776248196632cc1d4a.png is weird, but I can’t know what’s happening just with images…

Edit 3:

You have to change

.nav6 a {
    color: #7D7253;
    padding: 20px;
}

into

.nav6>li>a {
    padding: 20px;
}
.nav6 a {
    color: #7D7253;
}

And

.nav6 a:hover {
    background-image: url("../img/hoverbg.png");
    color: #53410F;
    text-decoration: none;
}

into

.nav6 a:hover {
    color: #53410F;
    text-decoration: none;
}
.nav6 > li > a:hover {
    background-image: url("../img/hoverbg.png");
}

Edit 4:

Sorry I didn’t explain why I was telling you to use selectors with >, I thought you knew it.

Your html is like this:

<ul class="nav6">
    <li><a href="#">Home</a></li>
    <li class="dropdown1"><a href="#">Categories</a>
        <ul>
            <li><a href="#">Buy</a></li>
            <li><a href="#">Sell</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">item 1</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">item 1</a></li>
        </ul>
    </li>
</ul>

If you use .nav6 a, the style will be applied to all <a> inside .nav6. That’s a descendant selector.

Then, this will be applied both to menu’s links and submenu’s links:

<ul class="nav6">

<li><a href="#">Home</a></li>

<li class="dropdown1"><a href="#">Categories</a>

<ul>

<li><a href="#">Buy</a></li>

<li><a href="#">Sell</a></li>

...

</ul>

</li>

</ul>

But if you use a child selector like .nav6>li>a, the style is applied only to the links which are childs of a <li> which is a child of .nav6 (only menu’s links). This way we can set which styles we want to apply to all links and which to menu’s links:

<ul class="nav6">

<li><a href="#">Home</a></li>

<li class="dropdown1"><a href="#">Categories</a>

<ul>

<li><a href="#">Buy</a></li>

<li><a href="#">Sell</a></li>

...

</ul>

</li>

</ul>

Edit 5:

To fix the problem with backgrounds,

change

.nav6 a:hover {
    color: #53410F;
    text-decoration: none;
}

to

.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a {
    color: #53410F;
    text-decoration: none;
}

and

.nav6 > li > a:hover
    background-image: url("../img/hoverbg.png");
}

to

.nav6>li:hover>a {
    background-image: url("../img/hoverbg.png");
}