Adding css drop down menu in a template

Question

I downloaded a template for my company. I managed to get most things done, but I want to make a drop down menu and I just can't handle it. I tried this explanation How to add drop down menu using CSS? because I don't know JavaScript or jQuery, but it doesn't seem to work on this particular template. Am I describing the wrong class in css?

HTML

</nav>
</section>
<header class="sixteen columns alpha omega">
    <nav class="main-nav sixteen columns">
        <ul class="ten columns alpha">
             <li><a href="index.html">Start</a></li>
             <li><a href="kancelaria.html">O Kancelarii</a></li>
             <li><a href="uslugi.html">Zakres Usług</a></li>
        <ul>
        <li><a href="#">Something You do</a></li>
        <li><a href="#">TODO</a></li>
    </ul>
             <li><a href="press.html">Press Room</a></li>
             <li><a href="kontakt.html">Kontakt</a></li>
         </ul>
         <div class="social six columns omega">
             <a href="#"></a>
             <a href="#"></a>
         </div> <!--Close Social Div-->
 </nav>

CSS

   .main-nav {
    margin-top: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
}
.main-nav li {
    display: inline;
    margin-right: 15px;
}
.social a:link {
    float: right;
    background-image: url(../img/facebook.png);
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;
    margin-left: 2px;

}
.social a:last-child {
    float: right;
    background-image: url(../img/twitter.png);
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;

}
.social a:hover {
    background-position: 0 0;
}

.main-nav li {
    position: relative;
}

.main-nav ul ul{
  position:absolute;
  left: 0;
  top: 100px;          /* height of the parent list item */
  display: none;       /* hide it */
}

.main-nav li:hover > ul{   /* show it when mouse is over the parent list item */
  display:block;
}

Here is the whole css http://jsfiddle.net/9LcfX/18/ I've tried to rename the description in css from main_nav to alpha etc. but nothing.

Please help me, in advance thanks for Your time.

Kinjan Koradiya · Accepted Answer · 2014-01-08 10:32:12Z

1

some structure problem in ur html code just replace html code with below code

<nav class="main-nav sixteen columns">
  <ul class="ten columns alpha">
    <li><a href="index.html">Start</a></li>
    <li><a href="kancelaria.html">O Kancelarii</a></li>
    <li><a href="uslugi.html">Zakres Usług</a>
      <ul>
        <li><a href="#">Something You do</a> </li>
        <li><a href="#">TODO</a> </li>
      </ul>
    </li>
    <li><a href="press.html">Press Room</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
  <div class="social six columns omega"> <a href="#"></a> <a href="#"></a> </div>  
</nav>

answered Jan 8, 2014 at 10:32

Kinjan Koradiya

4901 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3172499 Over a year ago

Thank You very much for the help, I'm getting closer, now theres this problem jsfiddle.net/9LcfX/20 the hover menu is to far away, is there a qucik fix for that?

user3172499 Over a year ago

I got it in main nav ul ul top px. So I answered myself. Thank You very much for the help!

Collectives™ on Stack Overflow

Adding css drop down menu in a template

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related