I'm trying to use jQuery UI to create a dropdown menu on a site that I'm working on. It looks okay at first glance, but the starting position of the nested ul elements seem to be blocking the next link in the menu. The blue box is what appears when I hover over the nested ul in Firebug and prevents hovering over "Link 2" How can I move this align this with the actual menu? Thank you!
The sub-links in grey work fine.
<div id="nav">
<ul>
<li>Link 1
<ul>
...
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
#nav ul {
list-style-type: none;
float:right;
}
#nav ul li ul {
position:absolute;
width: 200px;
}
#nav ul li ul li {
display: block;
position:relative;
top:40px;
left:-165px;
}
Turns out jQuery UI was generating some inline styles in an attempt to correctly position the dropdown menu.
<ul ... style="display: none; top: 84px; left: 913px;" aria-hidden="true">
I found this question with a similar issue. I added the following style to my stylesheet and it works now:
.ui-menu { top: auto !important; left:auto !important; }
Related
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 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 am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.
I tried display:inline-block too but it doesn't seem to work.
Here is the html,
http://jsfiddle.net/jairajdesai/7Lyss/
HTML :
<div id="top_navigation_menu">
<ul id="top_navigation_list">
<li class="top_navigation_options">Home</li>
<li class="top_navigation_options">Places</li>
<li class="top_navigation_options">Travel</li>
<li class="top_navigation_options">Stay</li>
<li class="top_navigation_options">FAQs</li>
</ul>
</div>
CSS :
#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}
Use display:inline with Ul and display:inline-block with li css class. Something like this
#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
display:inline-block;
}
JS Fiddle Demo
Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.
Updated JsFiddle
I am learning to create CSS menus WITHOUT floats. I got a partially "working" menu so far. However, the main menu's borders are separated. Also the submenu's borders are sized in half and the hover's background color is not working. At the same time, the sub-sub menu is not working
I am also trying to simplify the CSS code with a .menu .submenu .sub-submenu classes.
jsFiddle:
http://jsfiddle.net/vn64H/1/
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: Navigation menu</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<!-- START: menu -->
<ul id="nav">
<li class="menu">Home</li>
<li class="menu">Main Menu 2
<ul class="submenu">
<li>Sub Menu 2.1</li>
<li>Sub Menu 2.2</li>
<li>Sub Menu 2.3
<ul>
<li>Sub-Sub Menu 2.3.1</li>
<li>Sub Menu 2.3.2</li>
<li>Sub Menu 2.3.</li>
</ul>
</li>
<li>Sub Menu 2.4</li>
<li>Sub Menu 2.5</li>
<li>Sub Menu, Some Sample Text 2.6</li>
<li>Sub Menu, Sample Text 2.7</li>
</ul>
</li>
<li class="menu">Main Menu 3
<ul class="submenu">
<li>Sub Menu 3.1</li>
<li>Sub Menu 3.2</li>
<li>Sub Menu 3.3</li>
<li>Sub Menu 3.5</li>
<li>Sub Menu 3.6</li>
<li>Sub Menu 3.7</li>
</ul>
</li>
<li class="menu">Main Menu 4
<ul class="submenu">
<li>Sub Menu 4.1</li>
<li>Sub Menu 4.2</li>
<li>Sub Menu Sample Text 4.3</li>
<li>Sub Menu 4.4</li>
<li>Sub Menu 4.5</li>
<li>Sub Menu 4.6</li>
<li>Sub Menu 4.7</li>
<li>Sub Menu 4.8</li>
</ul>
</li>
<li class="menu">Menu 5</li>
<li class="menu">Menu 6</li>
<li class="menu">Contact</li>
</ul> <!-- /#menu -->
<!-- END: menu -->
</body>
</html>
CSS
#charset "utf-8";
#nav {
background-color: #000;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.975em;
text-align: left;
display: block;
border: 1px dotted #cccccc;
padding: 0;
margin: 0;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav li {
color: #fff;
text-align: left;
width: 110px;
border: 1px solid #CCCCCC;
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
}
/*Sub menu */
#nav li ul {
color: navy;
text-align: left;
list-style-type: none;
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
display: none;
position: absolute;
background-color: #990000;
}
#nav li ul a {
display: inline-block;
}
#nav li:hover ul {
visibility: visible;
display: block;
background-color: #E6B800;
}
#nav li:hover ul li {
background-color: #E6B800;
}
/*Sub-sub menu */
#nav li ul li ul li a {
display: none;
}
#nav li ul li ul li:hover {
visibility: visible;
display: block;
background-color: #E6B800;
}
#nav li ul li ul li:hover ul li {
background-color: #E6B800;
}
The main-menu borders are separated because the <li>s are inline-blocks with white-space in between them. Inline-blocks work like words in a text stream, so any white space, such as the line breaks you have in there, will be interpreted as text-space characters. The only way around that while keeping them inline-blocks is to put all the <li>'s on one line with zero white-space in between. Why do you want to avoid floats? That would be your best option.
The sub-menu items are half-spaced because the container has width of 200px, but each item is an inline-block with no width specified. Make them display:block isntead and they will expand out to the edges of the container.
Do apply your sub- and sub-sub-menu classes, that will be easier to see and work with than so many nested selectors.
Also: use teh the child selector syntax, e.g.: ul#nav > li it will apply the relevant styles only to the child items, and not to the grand-children, etc.
UPDATE
In asnwer to mcknz' question, I would place float:left on #nav li instead of display:inline-block. This solves 2 problems:
The unintended spacing between the menu items will disappear, regardless of white-space in the HTML. You can now control their spacing precisely with margins.
IE7 will not apply inline-block to list-items -- or any elements that are not natively inline (see: http://fourwhitefeet.com/2009/02/css-display-inline-block-in-ie7/)
Important note: You will need to specify the height of the #nav explicitly now, because non-floating parents of floating elements collapse (see: Why do non-floating parents of floating elements collapse?).
...also: you can safely remove subsequent text-align: left; declarations once you've applied it to #nav, this property inherits down to all nested elements, unless, of course, you have an intervening layer with text aligned left or center. Properties that inherit are listed here: http://www.communitymx.com/content/article.cfm?cid=2795d
The newline after each list item in your menu acts as a space. You can change to make all of them on one line, or you can use comments if you still want them visually separated in markup:
<li class="menu">Home</li><!--
--><li class="menu">Main Menu 2
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; }