CODEWITHSUNDEEP
csshtmldrop-down-menu
socasi0
socasi0

Reputation: 1

Drop Down Menu To The Right

I am attempting to make a drop down menu go to the right with HTML and CSS, I have the example here:

http://codepen.io/anon/pen/RNLmvq

Here is a screenshot of what it looks like without the text from codepen. http://s22.postimg.org/bd5sc51ap/sidebar.jpg

If there is any other additional information you need from me, please ask.

Thanks

Upvotes: 0

Views: 125

Answers (1)

RCG
RCG

Reputation: 246

I have looked at your code but the answer seemed quite clear, not sure if it's what will be the right answer but I've modified it to work for what you've described. If it's not what you're looking for please describe more details about your site needs.

http://codepen.io/anon/pen/KwXjaa

I've changed your aside css to 'float:right' from 'float:left'.

aside
{
    float: right;
    width: 164px;
    margin: 12px 0px 0px 0px;
    padding: 0px;
    border-right: thin dashed #2446ff;
    /*background-color: #ff0000;*/
}

update

I've cleaned up your HTML and re-arranged where the placement of the class 'Schedule' was to be put.

http://codepen.io/anon/pen/KwXjaa

in your HTML I've placed 'Schedule' class onto the li.

CSS now for schedule is as follows:

.Schedule ul li{
  display:none;
}
.Schedule:hover > ul {
  position:absolute;
  top:36px;
  left:168px;
  background:blue;
  display:block;

}

.Schedule:hover > ul li {
  position:relative;
  background:blue;
  display:block;

}

I've cleared out most of your other CSS you had in there before, wanted to provide you with a clean html/css snippets so you see exactly what you may need to include when you integrate.

What's happening in the above is your 'Schedule' class is on an li, the class is telling all the ul's with li's below that li that has 'Schedule' assigned to it, that they're to display none.

When you hover over schedule, the ul's that the browser finds that are layered under 'Schedule', will display block again and have absolute positioning.

I then made it so that 'Schedule' class on hover of first ul li sets the li's to relative positioning(otherwise all li children will stack ontop of each other which you don't want) and set display to block so they're visible again.

Upvotes: 1

Related Questions