I applied border style to my main menu li.
but my sub menu li also affected from the main menu li style.
here is the sample code please let me know how i can fix this.
ul.menu li {
border-left:1px solid #fcfcfc;
border-right:1px solid #e8e8e8;
}
above style also rendering on my sub menu li.
i don't want to use class or id i want direct style to tag.
is there any way how i can stop rendering border on my sub menu.
ul.menu ul li {
min-width: 200px;
}
If you only want to affect the direct children of the <ul> with class menu, you need to use this selector:
ul.menu > li {
...
}
So if you have this structure:
<ul class="menu">
<li>One</li>
<li>Two
<ul>
<li>Three</li>
</ul>
</li>
</ul>
Then this will style the <li> elements with contents One and Two, but not the submenu <li> with Three.
Related
Hi guys i'm trying to learn css ul and li menu bar. i'm trying to create this design http://s13.postimg.org/5bz1a4kw7/divider.jpg having the spaces and the divider per each menu bar, i can't seem to get the spacing, i tried adjusting it, but i can't get a grip on how to have this spacing per menu bar (li). Can you please get me to the right direction? Thanks
here's what i've done so far
http://jsfiddle.net/blackknights/Wbfjg/
<ul id="mcolor">
<li><font color="#000000"> Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I have updated your code.
li a{
display:block;
padding:5px 10px;
background:#ccc;
border-right:1px solid #fff;
}
li a.last{
border-right:none;
}
Check the jsfiddle
Try this Fiddle. Basically, make use of padding-left and padding-right and min-width for li elements.
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; }
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 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; }
I'm trying to make a <ul> tag display inline with a line of text. here's the HTML.
<li>
<input type="checkbox" id="449" value="Whats that?" class="checkbox"><label for="449">Whats that?</label>
<ul class="449">
<li>{...removed...}</li>
<li>{...removed...}</li>
<li>{...removed...}</li>
<li>{...removed...}</li>
</ul>
</li>
What it renders as now is this:
Whats that?
Li element
Li element
Li element
Li element
But I want it to render like this:
Whats that? Li element
Li element
Li element
Li element
What CSS rules do i need to put into that <ul>? And nevermind that class name, it's for zany javascript purposes. Thank you!
Float them:
p, ul {
float: left;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
<p>Whats that?</p>
<ul>
<li>Li element</li>
<li>Li element</li>
<li>Li element</li>
<li>Li element</li>
</ul>
ul.449{
display: inline-block;
}
Will get it inline. The vertical alignment is a bit weird.
I suggest ul.449 { display:inline-table} but it will support ie8+. Another solution with cross browser support I suppose could be to float:left; all elements (input, label, ul) and add margin:0; the ul
First approach: http://jsbin.com/axako3/2
Second approach: http://jsbin.com/axako3/3