I have a menu which has sub-menus and I have defined it as such:
<nav class='top'>
<li>Lanky</li>
<li>
Links
<nav class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</nav>
</li>
<li>Locks</li>
<li>Linger</li>
</nav>
I style it in such a way that the sub nav appears beside it's parent when on hover.
Problem is, I cannot click on those links. When I hover over the parent, the sub menu shows to the right and the Locks link displays beside the sub-menu (this is expexted). But once I mouseOut - say to try and click on dead beef, they disappear and the Lock link jumps back to its original position.
How do I make the sub menu persist to allow the mouse slide over to it?
To make your code compliant and accessible, you need to use the <ul> tags.
I suggest wrapping your <li> within the <ul> tags to fix your navigation errors - where you can also apply your class to the ul tag and there is no need for an additional div.
<ul class='top'>
<li>Lanky</li>
<li> Links
<li>
<ul class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</ul>
</li>
<li>Locks</li>
<li>Linger</li>
</ul>
Fixed this by addressing the list elements that had nav containers nested within. Many thanks to thirtydot for pointing me to jsFiddle - an amazing tool!
Here is the CSS...
nav { text-align: left; }
nav li { display: inline; text-align: center; }
nav a { display: inline-block; }
nav li { width: 95px; }
nav li nav { display: none; }
nav li:hover nav { display: inline; }
Related
I am trying to create a drop-down menu for when the user hovers an item in another menu.
My current HTML:
<ul>
<li class="menu-main-items">Item1</li>
<ul id="submenu">
<li>Sub-item1</li>
<li>Sub-item2</li>
</ul>
</li>
<li class="menu-main-items">Item2</li>
</ul>
CSS:
.menu-main-items{display:inline;}
#submenu{display:none;}
li:hover #submenu{ //display the submenu below the parent main item }
To align the sub-menu with the parent item, I was thinking using position:relative; on #submenu and adding a certain offset, but that causes flickering, as the sub-menu is being displayed before item 2, rearranging the menu. As of now I have searched around and could only find explanation with one item in the main menu which doesn't cause the problem.
Is there another way to approach this?
You should make the li elements inline-block and change the positioning to absolute. The flickering is because the element is being shown and pushing the content out of the way as it is inserted into the flow. position: absolute removes it from the flow, getting rid of the flicker.
If you want to move the submenu relative to the parent, add position: relative to the parent and use top and left (bottom and right aren't really useful) to move it.
For more information, see this CSS-Tricks article.
.menu-main-items{
display:inline-block;
position: relative;
}
#submenu{
display:none;
position: absolute;
left: -10px;
}
li:hover #submenu{
display: block;
}
<ul>
<li class="menu-main-items">Item1
<ul id="submenu">
<li>Sub-item1</li>
<li>Sub-item2</li>
</ul>
</li>
<li class="menu-main-items">Item2</li>
</ul>
Li : position: relative;
Ul.submenu : position: absolute;
You can position the submenu relative to the li using:
Top, bottom, left, right.
Example
Li {position: relative}
Ul {position: absolute;top:25px;left:0;}
You can hide and show on hover
Ul {display: none;}
Li.mainmenu-items:hover > ul {display: block;}
The > in the css rule means it only targets the first element of the specified child under it. So this is the first level of ul,s inside of the current item hovered
Is it possible to create a horisontally styled menu (like on image below) without using absolute positioning or JS?
Trying to create a menu. It uses standard unordered list to display.
Here is what I'm trying to achieve:
(Green list is a submenu of "How are you". It has a line break because it is limited by width.)
And currently what I have is this:
This is the pen: http://codepen.io/olegovk/pen/NNREMY
And the code:
HTML
<nav>
<ul>
<li>Hello</li>
<li>How are you
<ul>
<li>Allright!</li>
<li>And you?</li>
<li>Fine</li>
<li>La-la-la</li>
<li>Bla-bla-bla</li>
<li>Cheerio!</li>
</ul>
</li>
<li>Good bye</li>
</ul>
</nav>
<div class="clear"></div>
<p>Some paragraph to make sure it's below the menu.</p>
CSS
.clear {
clear: both;
}
p {
background-color: lightgrey;
}
li {
float: left;
list-style: none;
display: list-item;
margin: 0 0.5em;
}
li li {
margin: 0 1em;
}
li li a {
color: green;
}
nav ul ul{
max-width: 300px;
}
I know it's possible with absolutely positioning child lists or with JS. But absolute positioning of child lists takes them out of doc flow. As a result they overlap with content below them. Also I can't use JS.
for li li use this css style .
li li {
margin: 0 1em;
position:relative;
left:-110px;
}
and give a id to good bye li and then write it css
e.g
<li><a href="#" id='someId'>Good bye</a></li>
li #someId{
position:relative;
left:-150px;
}
Seems that it's impossible.
Here is another similar question: Position: absolute and parent height?
With regards to the menu, to achieve the desired result, the only solution is to have top level menu and sub-menu in different lists. That way no need to position sub-menu (second level list) absolutely.
I've got a menu that pops out of a list item. Something to this effect:
<li>
<ul class="topmenu">
<li class="submenu">
<a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt="Common IT Tasks" /></a>
<a class="otherIT" href="#" title="Common IT Tasks">Other - Common IT Tasks</a>
<p>Most common IT tasks.</p>
<ul class="subsubmenu">
<li>
Log a ticket
</li>
<li>
Map drives
</li>
<li>
Unlock a user
</li>
</ul>
</li>
</ul>
</li>
Immediately underneath this li item I have this:
<li class="break">
Back to top
</li>
When I don't hover over the li item it gives me this effect:
When I hover over this li item it gives me this effect:
Great the menu works, my issue is the gap between the word "Back to top" with the li item, it is fairly large. I believe it is due to the invisible li items of the list. For anyone interested, the CSS is something to this effect:
ul.topmenu, ul.topmenu ul {
display: block;
margin: 0;
padding: 0;
}
ul.topmenu li {
display: inline;
list-style: none;
margin: 0;
padding-right: 1.5em;
}
ul.topmenu li ul {
visibility: hidden; }
ul.topmenu li.submenu:hover ul {
visibility: visible;
}
Simple classic visibility is hidden unless you hover, however, the whitespace between the word "Back to top" with the list item is too large.
visibility: hidden only makes the element invisible, but does not remove it from the page flow.
display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way).
visibility : hidden only makes the element invisible, but does not remove it from the page flow. display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way)
ul.topmenu li ul
{
display: none;
}
ul.topmenu li.submenu:hover ul
{
display: block;
}
visibility:hidden do not show element, but still reserves space for it.
Try display:none
Use the CSS display: none rule instead of visibilty: hidden, because you want your tag to not be displayed at all, you don't want a blank space allocated in it's place (see). From the W3 docs:
Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves.
Also, what does the W3 validator say about your HTML?
I have a navigation menu and I wanted to have a dropdown menu for subpages. I created it and everything is ok except that the pages links in the top menu slide over to the right when the dropdown shows when I hover the page link with subpages.
What is it that I am missing here?
Thanks for the help in advance.
Here is the jsfiddle:
jsfiddle.net/AC8XK/
What I have is not 100% like that, since there is a lot missing, but it shows exactly the problem I mentioned.
I managed to get the menu working properly. The solution to the initial problem was, as mike said, changing the dropdown ul position from relative to absolute.
As for the positioning of the dropdown, I solved the problem by using padding-top instead of top or margin-top.
Thanks to everyone that tried to help.
The code you supplied in jsfiddle was..well...a bit of a mess. I had to strip a lot of it down and generate some base formatting for the dropdown. I will comment the important bits, but it should be more or less copy & paste. The code is solely the layout text for the menu - no visual or positional styling stuff.
Key Concepts: 1 - Set your LIs to width:auto and the li>ul to position: absolute;width:100%. This allows positioning and makes sure the individual ul ul lis are on separate lines.
2- You had the display:none and display:block correct. Alternatively, you can use off-the-screen positioning for the same purpose.
3- Remember to do ul ul {position:absolute;} to allow positioning of the submenus relative to the parent li!
HTML:
<div class="greenbar">
<nav>
<ul id="menu-navigation-menu" class="navigation">
<li id="menu-item-107" class="menu-item">About
<ul class="sub-menu">
<li id="menu-item-116" class="menu-item">Terms of Use</li>
<li id="menu-item-119" class="menu-item">Just another link</li>
</ul>
</li>
<li id="menu-item-106" class="menu-item">Services
<ul class="sub-menu">
<li id="menu-item-120" class="menu-item">Another link again</li>
</ul>
</li>
<li id="menu-item-105" class="menu-item">Clients</li>
<li id="menu-item-104" class="menu-item">Resources</li>
</ul>
</nav>
</div>
CSS:
nav ul {
list-style-type: none;
position: relative;
display: inline-table;
}
nav ul li {float: left;}
nav ul li a { display: block; text-decoration: none;}
nav ul ul {
display: none;
position: absolute;
width: auto;
}
nav ul li:hover > ul { display: block;}
nav ul ul li { width: 100%;}
I trying to come up with a simple css layout which should look like this:
This is my html code for the header and nav bar:
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Help
<li>Contact Us
<li>Customers
</div>
And I'm already doing some styling on the navigation bar, however I'd like to be able to keep the two links within the header right aligned and the logo image left aligned.
When I try to edit those links in the header, it all gets messed up because I'm confused about how to differentiate between the navigation list items and header list items.
Could someone please help me with the header positioning?
#header ul { float: left; }
or
#header ul { position: absolute; right: 0; }
In the header, you need to float the h1 left, and the ul right, and then add display: inline to your links (to keep them on the same line).
To target the list items in the header, you can simply use a parent selector, like this: #header li.
Here's what you need:
#header {
border: 1px solid #ccc;
overflow: hidden; /* clearfix */
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
}
See DEMO.