Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Drop down menu positioning

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;
}

1 Answer

Donny Stiefel
Donny Stiefel
7,682 Points

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.

Hi Donny, many many thanks for these ideas - I eventually was able to fix it on my own after three nights fight...The problem was that I had the logo and menu icon in the same div and when I floated menu icon to the right it appeared like 200px bellow the original position...the problem was that I needed to put logo as position: absolute; after that it all worked well. Many thanks again :) Petr