CODEWITHSUNDEEP
css
Coding Duchess
Coding Duchess

Reputation: 6909

Dropdown menu items displayed to the right and not down

I need help with my CSS. I have the following menu:

.h-menu .menu-item .dropdown-content a { display: none;}
.h-menu .menu-item:hover .dropdown-content a { 
    display: block;
}

.h-menu .menu-item a {
  display:block;
  float: left;
    text-decoration: none;
  margin: 1em;
}
<div class="h-menu">
   <div class="menu-item">
      <a href="">Menu Item 1</a>
    </div>

    <div class="menu-item">
      <a href="">Menu Item 2</a>
      <div class="dropdown-content">
        <a href="">Sub-item 1</a>
        <a href="">Sub-item 2</a>
        <a href="">Sub-item 3</a>
      </div>
    </div>

         <div class="menu-item">
      <a href="">Menu item 3</a>
     </div>			
 </div>

What happens is when I hover over the second menu item, the sub items are displayed to the right and not down. How can I fix it?

Also I want to use CSS to alight the menu to the right. Can someone please help?

Upvotes: 0

Views: 60

Answers (4)

blecaf
blecaf

Reputation: 1645

Make the main menu inline block elements. Then remove the float on the "a" tag. See example below. or just remove the float attribute from the a tag and put it on the menu divs

.h-menu {
text-align: right;
}

.menu-item {
  display: inline-block;
  vertical-align: top;
  border: 1px red solid;/**Remove for debbugging purposes**/
}

.h-menu .menu-item .dropdown-content a { display: none;}
.h-menu .menu-item:hover .dropdown-content a { 
    display: block;
}

.h-menu .menu-item a {
  display:block;
  /**float: left**/
  text-decoration: none;
  margin: 1em;
}
<div class="h-menu">
   <div class="menu-item">
      <a href="">Menu Item 1</a>
    </div>

    <div class="menu-item">
      <a href="">Menu Item 2</a>
      <div class="dropdown-content">
        <a href="">Sub-item 1</a>
        <a href="">Sub-item 2</a>
        <a href="">Sub-item 3</a>
      </div>
    </div>

         <div class="menu-item">
      <a href="">Menu item 3</a>
     </div>			
 </div>

Upvotes: 1

user5171707
user5171707

Reputation: 

.h-menu .menu-item{
  position: relative;
  float: left;
}
.h-menu .menu-item .dropdown-content{
  position: relative;
}
.h-menu .menu-item .dropdown-content a {
  display: none;
}

.h-menu .menu-item:hover .dropdown-content a { 
    display: block;
}
.h-menu .menu-item a {
    text-decoration: none;
    margin: 1em;
}
<div class="h-menu">
        <div class="menu-item">
            <a href="">Menu Item 1</a>
        </div>

        <div class="menu-item">
            <a href="">Menu Item 2</a>
            <div class="dropdown-content">
                <a href="">Sub-item 1</a>
                <a href="">Sub-item 2</a>
                <a href="">Sub-item 3</a>
            </div>
        </div>

       <div class="menu-item">
            <a href="">Menu item 3</a>
       </div>           
 </div>

Upvotes: 0

user8791946
user8791946

Reputation:

Here's another option, using elements position.

.h-menu { 
  text-align: right;
}
.h-menu .menu-item { 
  display: inline-block;
  position: relative;
}
.h-menu .menu-item .dropdown-content { 
  display: none;
  position: absolute;
  top:40px; left: 0;
}
.h-menu .menu-item .dropdown-content a { 
  display: block;
}
.h-menu .menu-item:hover .dropdown-content { 
    display: block;
}

.h-menu .menu-item a {
    display:block;
    float: left;
    text-decoration: none;
    margin: 1em;
}
<div class="h-menu">
        <div class="menu-item">
            <a href="">Menu Item 1</a>
        </div>

        <div class="menu-item">
            <a href="">Menu Item 2</a>
            <div class="dropdown-content">
                <a href="">Sub-item 1</a>
                <a href="">Sub-item 2</a>
                <a href="">Sub-item 3</a>
            </div>
        </div>

       <div class="menu-item">
            <a href="">Menu item 3</a>
       </div>           
 </div>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Use CSS Position. Add position: relative to .h-menu & position: absolute to .dropdown-content. And style the element using CSS Flexbox, like:

.h-menu {
    display: flex;
    position: relative;
}

.h-menu .menu-item .dropdown-content {
    position: absolute;
    top: 100%;
    display: flex;
    flex-direction: column;
}

Have a look at the snippet below:

.h-menu .menu-item .dropdown-content a { display: none;}

.h-menu .menu-item:hover .dropdown-content a { 
    display: block;
}

.h-menu {
    display: flex;
    position: relative;
}

.h-menu .menu-item .dropdown-content {
    position: absolute;
    top: 100%;
    display: flex;
    flex-direction: column;
}

.h-menu .menu-item a {
    display:block;
    float: left;
    text-decoration: none;
    margin: 1em;
}
<div class="h-menu">
        <div class="menu-item">
            <a href="">Menu Item 1</a>
        </div>

        <div class="menu-item">
            <a href="">Menu Item 2</a>
            <div class="dropdown-content">
                <a href="">Sub-item 1</a>
                <a href="">Sub-item 2</a>
                <a href="">Sub-item 3</a>
            </div>
        </div>

       <div class="menu-item">
            <a href="">Menu item 3</a>
       </div>           
 </div>

Hope this helps!

Upvotes: 1

Related Questions