See here: http://jsfiddle.net/wHztz/67/
In this example the colors are placeholders for background images, I noticed the nested list stops overlapping when the display:block is removed from .innerLeft ul li a but then the background images wont show correctly.
I don't have much experience with CSS. Is there a way around this? Thanks!
HTML:
<div class="innerLeft">
<ul>
<li>Fruit</li>
<li>
<ul>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
</ul>
</li>
<li>Vegetable</li>
</ul>
</div>
CSS:
.innerLeft ul {
width:199px;
float:left;
margin:0px;
padding:0px 0 0 12px;
list-style:none;
min-height:10px;
}
.innerLeft ul li{
padding:0px;
margin:0px 0 10px 0;
height:18px;
}
.innerLeft ul li a{
background: red;
display:block;
}
.innerLeft ul li ul li a{
background: blue;
}
.innerLeft ul li {
clear: left; /* Added */
padding:0px;
margin:0px 0 10px 0;
height:18px;
}
http://jsfiddle.net/wHztz/70/
use display:inline-block; instead
demo
.innerLeft ul li a{
background: red;
display:inline-block;
}
Its happening because you have applied css to ul li a and not ul li ul :)
Related
I´m trying to make a submenu on hover for hours, read about ten tutorials or more and finally don't get it working.
I want it to show "Zimmer", "Reservierung" and "Preise" in a vertical menu if I hover "Hotel" and so on.
This is my code:
a {
text-decoration: none;}
nav {
height: 50px;
clear: both;}
nav ul {
padding: 5px 0px;
text-align: center;}
nav li {
margin: 0px;
display: inline;
padding: 0px;}
nav li a {
font-size: 18px;
color: #775923;
padding: 0px 20px;
margin: 0px;}
nav li a:hover, nav li a.current {
color: #775923;
padding: 0px 20px 14px 20px;
-webkit-padding-after: 15px;
box-shadow: 0 4px #b1d130;}
nav ul ul{
display: none;}
nav ul li:hover ul {
display: block;}
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel</li>
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
<li>Restaurant</li>
<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
<li>Anfahrt</li>
<li>Kontakt</li>
<ul>
<li>Team</li>
<li>Über Uns</li>
</ul>
</ul>
</nav>
Link: http://jsfiddle.net/AuJeF/445/
Hope you can help.
Thank you
You have the problem on your markup,
change as following-
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
(this is a simple dropdown menu)
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
<li>Restaurant<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
</li>
</ul>
</nav>
css
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
jsfiddle
the mistake in you html. ul > ul mast be insite li. But not outsideю
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
You're writing style - if ul inside li then ul display block. But inside li no ul it after him.
Will validator error, because tag ul inside >ul that's not true, there can be only >li
Think, I help U
Background color (red) misses out after I am hovering drop down items.
What should I do to keep the background color of the menu item I am in?
<style>
nav ul
{
list-style-type:none;
padding:0px;
text-align:center;
background-color:grey;
}
nav ul li
{
display:inline-block;
}
nav ul a
{
display:block;
padding:20px;
padding-left:50px;
padding-right:50px;
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:arial;
font-size:20px;
}
nav ul a:hover
{
background:red;
}
nav ul ul {
display: none;
}
nav ul li:hover ul{
display:block;
position:absolute;
}
nav ul ul li
{
display:block;
border-bottom:solid 1px black;
}
</style>
</head>
<body>
<nav>
<ul>
<li>one</li>
<li>two
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>three
<ul>
<li>ay</li>
<li>bee</li>
</ul>
</li>
<li>four</li>
</ul>
</nav>
</body>
This is because the parent li is not attracting the :hover, so a hover on the child submenu doesn't keep it active. As such, you need to move the style change to the li:hover instead of the a child, as the submenu is an sibling of the a and not direct child.
Change:
nav ul a:hover {
background:red;
}
To:
nav ul li:hover {
background:red;
}
Demo Fiddle
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
I can't seem to make the drop-down <ul> align with it's parent <li>.
What am I doing wrong?
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {display: block;
position:absolute;
}
Fiddle
ul elements have a default padding-left value applied by the user-agent, so by removing that you get the alignment you asked for (There is also a margin added by you, but I'm gonna ignored it since you've added it yourself).
#toolbar ul {
padding-left: 0;
}
or (if you want to target only the sub-menu):
#toolbar ul ul {
padding-left: 0;
}
Demo
What adonis said was absolutely correct. There are certain other elements which take default padding and margin. So try using reset before styling any element.
*{margin:0;padding:0;}
if no list item of your page wants default bullets you may also include list-style:none in the above reset lines of code.
There is margin and padding in this case (you add the margin yourself) which is affecting it.
View here for a fix
(this has outlines for more visual proof)
CSS:
#toolbar ul {
padding: 0;
list-style-type:none;
}
#toolbar ul > li {
display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {
display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul ul > li {
margin: 0;
}
Try this one i have pasted the code here
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul li:hover ul li{
margin-left: -30px;
}
I want to add a nested list but I am having a problem with it inheriting from the parent list. I've followed this question and this question but they haven't helped.
How could I get rid of the red background in the nested list?
http://jsfiddle.net/wHztz/25/
<div class="innerLeft">
<ul>
<li>Fruit</li>
<li>
<ul>
<li>Apples</li>
</ul>
</li>
<li>Vegetable</li>
</ul>
</div>
.innerLeft ul {
width:199px;
float:left;
margin:0px;
padding:0px 0 0 12px;
list-style:none;
min-height:10px;
}
.innerLeft ul li {
background: red;
padding:0px;
margin:0px 0 10px 0;
height:18px;
}
.innerLeft ul li ul {
background: '';
}
.innerLeft ul li ul li {
background: blue;
}
don't use background-color in li use it in anchor
.innerLeft ul li a{
background: red;
display:block;
}
this will solve your issue
updated jsFiddle file
The following rule tells the browser to render any list element inside innerLeft with a red background:
.innerLeft ul li {
background: red;
padding:0px;
margin:0px 0 10px 0;
height:18px;
}
Use specificity to target the first ul:
ul li {
background-color: #fff;
}
.innerLeft > ul li {
background: red;
...
}
By using the > selector, you are telling the browser to select the child of .innerLeft, or direct descendant.