Drop down menu positioning

Question

Hi, I used CSS to create drop down menu, but I have a problem with positioning. I make position I need and then I use the hover display thing and the positioning completely changes. I want my drop down appear tin line to the left from the icon. Here is my HTML code / what am I doing wrong? Many thanks Petr

<body>

    <header>

        <div class="navbar-pozadi"></div>   

            <div class="navbar">

                <div>
                      <a href="index.html">
                        <img src="img/logot4.png" height=77px width=130px alt="logo" id="logo"> 
                      </a>
                </div>

                <nav>

                    <ul class="menu">
                        <li><img src="img/img2/menu2.png" alt="Menu" class="menuicon">

                            <ul>

                                <li class="cena"><img src="img/img2/cena1.png" alt="Cena"></li>
                                <li class="kontakt"><img src="img/img2/kontakt1.png" alt="Kontakt"></li>

                            </ul>

                        </li>
                    </ul>

                </nav>  

            </div>  

    </header>           

    <div class="obr1"></div>

</body>

and CSS code:

.navbar {
    height: 78px;
    position: fixed;
    width: 100%;

}

.navbar-pozadi {
    height: 78px;
    position: fixed;
    width: 100%;
    background-color: black;
    opacity: 0.1;

}

#logo {
    float: left;

}

.menuicon{/*menu icon*/             
    float: right;
    border-radius: 2px; 
    margin-right: 15px;
        border: 1px solid red;
}   

.cena ,
.kontakt{
    float: right;
    border: 1px solid red;
    height: 30px;
    width: 100px;
    border: 3px solid blue;
    display: inline-block;
    float: right;
    position: relative;
}

header ul ul{
    display: none;
    position: absolute;
}

header ul li:hover ul{
    display: block;
}

.menu ,
.menu li,
.menu li ul,
.menu li ul li{
    display: block;
}

Answer 1 · 2014-09-29T20:42:29Z

September 29, 2014 8:42pm

First, let's fix a piece of your code, and then we can look at the drop down menu. In your html code you have the following line:

<img src="img/logot4.png" height=77px width=130px alt="logo" id="logo">

This can easily mess with some browsers that expect to see the values in quotations. Either use something like height="77" or just set it in a style, whether inline or external ( style="height:77px;width:130px;" ).

Second, if I understand your question, you want your menu to slide in to the left and be an inline list? I can't easily and quickly change your code to do this but hopefully I can get you on the right track if this is the case. You must have an original position and an ending position. Let's say, for instance, that you wanted a menu to slide in from the right side of the page edge. You would first create your menu, and let's just say it is 200px wide, you set the position of the right side to a negative number to hide it (either all of it or most of it...depending on what will trigger the hover). Example css based on your code:

.menu {
  right: -180px; /* I am leaving 20px outside to hover over for this simple example */
  position:fixed;
  transition-duration: 0.3s; /* not required but handy */
  display:block;
  width:200px;
  height:150px;
  background-color:black;
}
.menu:hover {
  right:0;
}

  <div class="menu"></div>

The above code will transition the menu on hover and bring it into full view.

I won't rewrite your code, but maybe you can start with a simple div block, use the code above as a guide and start making incremental steps to make it work for your situation. Also, unless you specifically need your UL nested inside an LI, I would suggest against it, especially if the parent is only consisting of the one LI.

Welcome to the Treehouse Community

Looking to learn something new?

Petr Klimeš

Petr Klimeš

Drop down menu positioning

1 Answer

Donny Stiefel

Donny Stiefel

Petr Klimeš

Petr Klimeš