Html/Css expanding menu, how? [closed] - html

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So, what I want to make is simple, I want an expanding menu. So for example, if you hover or click over/on one item, like "Home", there will appear several other items underneath it.
Basically, what I want is a floating div underneath the menu item. I already tried
menubar {
visibility:hidden
}
menubar:hover, menubar:active {
visibility:visible
}
This doesn't work!
Help? Thanks.

Maybe this is what you're trying to achieve: http://jsfiddle.net/d74Yv/
Basically we're using :hover and + selectors to show the submenu only when either its .handler or the .menu itself is hovered.

Related

What can I do to keep my list from scrolling when I click search? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 19 days ago.
Improve this question
What can I do to keep my list from scrolling when I click search?
codepen:
codepen.io/Lubanskakinga/pen/mdjXVEK?editors=1100
Since it is a flexible structure, when the search-txt width increases, it scrolls in other divs. If you add Position:absolute and right:0 this problem goes away.
.search-txt {
position: absolute;
right:0;
..
..
}

How can I space out the links on my menu bar? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
Thats a picture of of the menu bar. as you can see it is very close together. (click the link to see photo)
You can use either margins or padding in CSS.
https://www.w3schools.com/cssref/pr_padding.asp
to space out your link you can use "PADING LEFT" here is a small link to give some explanation :)
https://www.w3schools.com/css/css_padding.asp
http://dabblet.com/gist/5b2553d1b366469d0b3979a0905a9c7e

Page layouts of elements [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm not very expert in html, but i would like to know where it is possible to understand if an item is close to another element. For instance a div to another div or if a table is adjacent to an image or an another table.
With jQuery you can use closest to find this out. http://api.jquery.com/closest/
Add borders to the elements you want like so:
<p style="border: 1px solid black;">A paragraph</p>
Firefox has a neat trick to check elements.
Go to your page > Right click on it > Inspect element (a layout will appear at the bottom of the page). Top right of this layout in the gray area you have a 3d cube (it's the second item). Click on it and it will give you a 3d view of your page.

How do I move the search bar to the top without hiding it? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
In this website www.johnpaulus.com I am unable to move the top search bar to the topmost position, just to the right of the social networking icons. It is getting hidden behind the background.
How can I shift it up and make it visible on the right side of the social networking icons?
I wish to use CSS / HTML only.
Your positioning is wrong, a fiddle would be helpful but just did this using firebug, give margin: -40px 0 0; to #searchbar, you can do it better with positioning but as you've not shared any fiddle or code I tried to modify your styles
Screen Shot

Stop Navigation Bar After Last Item [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to get my navigation bar to stop after item #6.
I want the vertical dividing line and the dark space after it to be deleted. I then want item #6 to have rounded corners at the end of it - the same way that item #1 starts.
http://jsfiddle.net/Abijah/6ykVS/
I think you want your navigation to look like Apple's menu bar. So made changes to your CSS & added some also. Please have a look. I think you like it this way.
Here is the fiddle: http://jsfiddle.net/6ykVS/7/
#nav { width: auto; } /* this may reduce the extra space after the menu */
#nav li:last-child { } /* this helps to write css for last li element */