CODEWITHSUNDEEP
javascriptcssmenuonclickborder
Hardist
Hardist

Reputation: 1983

Javascript CSS Menu borders / box shadows

I am trying to create a menu, just for learning purposes and to understand CSS better. Here is my example:

https://jsfiddle.net/3eacLaxz/

The problem is mainly in here:

.testul li ul li {
position: fixed;
top: 99px;
list-style: none;
white-space: nowrap;
height: 24px;
line-height: 24px;
background: -webkit-linear-gradient(#c8bfb0, #f5efe6);
border-bottom: 1px solid #d3c7b6;
z-index: 50;
}

My issue is, that once clicked on a menu button, the submenu should display on the far left, and it should just display each submenu link next to each other. As in this example:

https://i.sstatic.net/rvBNv.png

I tried using positioning, but I couldn't get it fixed. Whenever I change the position: fixed; in .testul li ul li, the submenu doesn't display at all anymore because I think it opens in the same div, BEHIND the top menu. But if I use "fixed", all LI's get displayed on top of each other on the left, as in the JSfiddle.

Upvotes: 0

Views: 44

Answers (1)

Doug
Doug

Reputation: 821

This should get you started on your drop menu position problem...

https://jsfiddle.net/p2dtswy7/1/

Basically what you want to do is to position:relative the parent element (the parent li). Then the dropdown (or child) ul you want to give position:absolute. You can then start pixel-pushing it around until it plays nicely.

Basically, if you position an element in the DOM with position:absolute it will be positioned with reference to the entire document or DOM. However, if you position its parent element position:relative the child will be positioned relative to its parent instead.

With regards to your initial problem of the double borders... there would be ways of doing this. I might add dummy list items at the beginning and end of the ul and add the borders/shadows to those. Then you might need to hide their other borders and shadows using :first-child and :last-child. However this solution would generate a lot of unnecessary markup for very little gain... IMHO, I think what you've created already looks bob-on and no client is going to pull you up on such a detail. :)

Upvotes: 2

Related Questions