Whenever I make a link within a list, it inherits the properties of the menu link list in my CSS. I pasted the CSS of the menu list below which keep on passing its properties to any links within any list in my website. I need help as to how can I label the menu list items in a way that they don’t pass their properties to any link in a list.... Please help!
ul li a {display: block;background: #660000;padding: 5px 10px 5px 10px;text-decoration: none;color: #fff; border-left:1px solid #660000;}
ul li a:hover {background: #3300cc; margin: 0; }
li:hover ul {display: block; position: absolute; margin:0; }
li:hover li {float: none; }
li:hover a {background: #3300cc; }
li:hover li a:hover {background: #660000; }
.drop-nav li ul li {border-top: 0px; position: relative; padding:0px; z-index: 100; border-bottom:0px; margin: 0; right:0; left:0; }
li li:hover a {display: block; }
li li ul a {display: none; border-left:1px solid #660000; margin-left: 60px; margin-top:-30px; margin-bottom: 30px; }
li:hover li:hover ul li a:hover {background: #660000; margin-top:-30px; margin-bottom:30px; margin-left: 60px;border-left:1px solid #660000; }
Your help is appreciated!
Use less general selectors in your Menu list like a '.class' instead of 'ul li'.
OR
Use the pseudo :not on your anchor tags used in main area. (Be careful it's not supported by every browser)
Related
I am coding a very simple CSS navigation menu. I’m trying to stretch the nav to 100% width across the page and set the last menu option to orange background color and white text color to no avail.
Can someone have a look at my CSS code and see where my problem is?
body {
background: #282828;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
margin-right: 5px;
padding: 10px 20px;
position: relative;
height: 20px;
line-height: 20px;
background-color: #282c2b;
color: #fff;
}
#nav > ul > li {
float: left;
height: 30px;
line-height: 30px;
background-color: #282c2b;
border-left: 4px solid #282c2b;
}
#nav li > ul {
visibility: hidden;
position: absolute;
top: 0px;
color: #fff;
}
#nav > ul > li > ul {
width: 100%;
top: 50px;
margin-bottom: 10px;
left: -4px;
}
#nav li:hover {
background-color: #ffffff;
color: #282c2b;
border-left: 4px solid #ff3d00;
}
#nav li:hover > ul {
visibility: visible;
}
#nav ul li .navOrange {
background-color: #ff3d00;
}
Here’s a CodePen
I know it might be hard to achieve this with pure CSS but is it possible to make the menu drop down upon clicking or is it just set to rollover without JavaScript?
so i decided to change it up a little and use elements because it suits me better.
so i now have the following;
http://codepen.io/anon/pen/waKENz
when i add around the div elements it doesnt use the style setup in css, why is it doing this?
and is it possible to perhaps have menu option 4 perform a dropdown on rollover as before or not with elements.
You might have to target each navigation item seperately by setting a percentage width for the item and probably a percentage margin also. Make sure they all add up to 100%.
#nav > ul > li {
margin: 0 1%;
}
.home,
.level-1,
.support,
.sign-up {
width: 18%;
}
.info {
width: 20%;
}
.home {
margin-left: 0;
}
.sign-up {
margin-right: 0;
}
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="info">Information</li>
<li class="level-1">Level 1</li>
<li class="support">Support</li>
<li class="sign-up">SIGN-UP!</li>
</ul>
</div>
Here's a demo jsFiddle (not full code).
The last item in the navigation is not turning orange because the selector is incorrect. You have:
#nav ul li .navOrange { background-color: #ff3d00;}
Which says (working right to left), select any element with the class of .navOrange that is a child of any li that is a child of any ul that is a child of #nav. .navOrange is an not a child of an li but on class on an li and also a child of a ul.
Remove li from the selector and it will work.
#nav ul .navOrange { background-color: #ff3d00;}
About the orange background color: you need to remove the space between "li" and ".navOrange" in the last definition. This will make it more specific than the other definitions and be applied later.
Full width can be achieved relatively simply if you know how many options you'll have in the menu with resizing the buttons to an adequate percentage. Though be careful with this - you generally want something less than 20% with 5 buttons because of the margins etc.
The hover menu that you already have is pure CSS, I don't know of a way to make it onclick without JavaScript.
Please check this code snippet.
body {background: #282828;}
#nav ul{ margin:0; padding:0; list-style:none; }
#nav ul li{ margin-right:5px; padding:10px 20px; position:relative; height:20px; line-height:20px; background-color:#282c2b; color:#fff; }
#nav > ul > li { float: left; height:30px; line-height:30px; background-color:#282c2b; border-left:4px solid #282c2b; }
#nav li > ul{ visibility:hidden; position: absolute; top:70px; color:#fff;
transition: all 0.2s ease-in;
opacity: 0;
}
#nav li.have-item:hover ul{
visibility:visible;
top:50px;
opacity: 1;
}
#nav > ul > li > ul{ width:100%; margin-bottom:10px; left:-4px; }
#nav > ul > li > ul li{
width:100%;
}
#nav li:hover{ background-color:#ffffff; color:#282c2b; border-left:4px solid #ff3d00; }
#nav li:hover > ul{visibility:visible;}
#nav > ul > li:last-child { background-color:#ff3d00 !important; }
<div id="nav">
<ul>
<li>Home</li>
<li>Information</li>
<li>Level 1</li>
<li class="have-item">Support
<ul>
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li class="navOrange">SIGN-UP!</li>
</ul>
</div>
http://jsfiddle.net/KsR5K/
#nav {
position: absolute;
font-family: digital_techregular;
font-size: 24px;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display:block
}
#nav ul {
background: #000;
list-style: none;
position: relative;
padding: 0px;
}
#nav ul:after {
content:"";
clear:both;
display:block
}
#nav ul li {
float:left
}
#nav ul li:hover {
background: #757575;
}
#nav ul li:hover a {
color:#fff
}
#nav ul li a {
display:block;
padding-top: 3px;
padding-left: 20px;
padding-right:20px;
color:#fff;
text-decoration:none
}
#nav ul ul {
background: #000;
padding:0;
position:absolute;
top:100%
}
#nav ul ul li {
float:none;
position:relative
}
#nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
#nav ul ul li a {
padding-left: 20px;
padding-right: 20px;
color:#fff
}
#nav ul ul li a:hover {
background:#757575;
}
Right now, I have two drop down menus. One under Browse Models, and another under Tutorials.
If you look at the sub menus, the items' widths adjust accordingly depending on what is typed. If you look at tutorials, under the Printers sub menu, you will see Test, and Test 2. Only on Test 2, the 2 is placed underneath the word Test.
Basically, the sub sub menus aren't properly adjusting based on the width of the items in the same way that the sub menus are. If you were to type "Model Finishing" where Test 2 is, it would stack the words. But the "Model Finishing" item in the sub menu is all on one line.
I'm still pretty new at this. This is the first time I've tried to create a nested menu like this, I'm pretty much just going off of tutorials, so any advice would be appreciated.
Thanks for your time.
Edit: Changed the JSfiddle and code to reflect what I'm currently working with.
http://jsfiddle.net/S5cYJ/6/
#nav ul ul ul {
/* add this */
width:100%;
}
also remove width:100% from below
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
display:block;
}
you should look into bootstrap. It has a nice menu already built so that you can concentrate and doing other things http://getbootstrap.com/components/#navbar
Fixed this by adding:
white-space: nowrap;
to #nav ul.
I have recently been working on a small CSS menu that I can’t get working properly. Ive been fiddling around with existing menu’s and trying to get the positioning and fonts etc to be working.
Basically first I had my main menu, which is working fine the way it should. Now when I try add a dropdown to one of the options, it really messes up and I am completely clueless to fixing this mess :S
What I need help in: Positioning the dropdown menu’s below the correct menu-item (now they always float on the left). Also I want the submenu items, to be the exact same style/size/font/etc as the main menu items, which for some reason I can’t get working either.
Any help is appreciated, I submitted the CSS / HTML Code of the menu into a pastebin file:
CSS: http://pastebin.com/rJEgvnK1
HTML: http://pastebin.com/e52RuH4r
Its not perfect but still you can figure out the positioning correctly but not the fonts. Check this jsfiddle
CSS used:
#mainMenu ul{
width:954px;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size: 18px;
text-transform: uppercase;
}
#mainMenu ul li a{
text-decoration:none;
color:#000000;
background-color:#eee;
padding:0.2em 0.6em;
border-right:0px solid white;
display:block;
}
#mainMenu a:hover{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul li{
display:inline-block;
position: relative;
}
#mainMenu ul ul {
background-color: #eee;
display: none;
width: 133px;
height: auto;
position: absolute;
border: solid 1px #ddd;
top: 23px;
}
#mainMenu ul li:hover > ul{
display:block;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size:18px;
text-transform:uppercase;
}
#mainMenu ul ul li:hover a{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul ul li:hover {
cursor:pointer;
}
#mainMenu ul ul li {
float:none;
padding:10px;
}
#mainMenu ul ul li{
font-size:16px;
padding:0 10px;
}
Not perfect but this should get you furter:
jsfiddle
To get the blocks below each link (IN YOUR CSS), simply remove the a-Tag from #mainMenu ul li a{
This one is a little nicer !!!
I have been trying quite a few guides on getting sub-menus to work. Some which include JS. Now I'm trying a just css approach but I'm kinda stuck on getting the submenu to work for me.
My code is on fiddle here: http://jsfiddle.net/PLb5K/
To do a basic test I have done
#nav ul li ul {
display: none; }
#nav ul li:hover ul {
display: block;
position: absolute; }
UPDATE
#nav ul:hover .sub {
display: block;
position:absolute;
}
fixes the "not working on hover" issue but any list item will show the sub menu. Please could anyone help on how to make it so only the single parent will show the submenu.
here is a basic html/css example for you:
the fiddle
css
ul {
margin: 0;
padding: 0px 100px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
ul li {
background-color:grey;
display: inline-block;
*display: inline;
padding:4px 8px;
margin:0;
zoom: 1;
}
ul li a{
color: white;
text-decoration:none;
}
ul li ul.sub{
display:none;
position:absolute;
margin-top:4px;
margin-left:-8px;
}
ul li:hover ul.sub{
display:block;
}
ul {
list-style-type: none;
padding: 0px 5px 0px 5px;
margin: 0px;
}
ul li {
border-bottom: 1px solid #B9D3EE;
}
ul li a:link,
ul li a:visited,
ul li a:active {
width: 100%;
color: blue;
}
ul li a: hover {
width: 100%;
color: #ffffff;
background-color: #B9D3EE;
}
In IE the above code will highlight the complete cell when hovered.
But in FF it will only highlight the link that is within it.
I would like FF to highlight the complete cell as IE does.
Here is the list:
Keep in mind that only the first link has been created because I have just started creating this list and stopped to test it when I noticed this problem.
<ul>
<li>beauty</li>
<li>creative</li>
<li>Info Tech. (IT)</li>
<li>cycle</li>
<li>event</li>
<li>financial</li>
<li>legal</li>
<li>lessons</li>
<li>medical</li>
<li>marine</li>
<li>pet</li>
<li>automotive</li>
<li>farm+garden</li>
<li>household</li>
<li>labor/move</li>
<li>MKT/COMM</li>
<li>office</li>
<li>skill'd trade</li>
<li>real estate</li>
<li>health/wellness</li>
<li>travel/vac</li>
<li>write/ed/tr8</li>
</ul>
Any help is much appreciated!
You can make your a elements as block elements, so they will get all width of parents elements (demo: http://jsfiddle.net/WasWE/).
ul li a:link, ul li a:visited, ul li a:active {
display: block;
color: blue;
}
ul li a:hover {
background-color: #B9D3EE;
color: #ffffff;
}
Or you can add hover event to li elements (demo: http://jsfiddle.net/XmwTV/):
ul li:hover {
background-color: #B9D3EE;
}
ul li a:link, ul li a:visited, ul li a:active {
color: blue;
}
ul li a:hover {
color: #ffffff;
}
Hi now remove with 100% in your anchor link css and define display block in you css in anchor
as like this
ul li a: link,
ul li a: visited,
ul li a: active {
display:block; // add this line
width:100%; // remove this line
color: blue
}
ul li a:hover{
width:100%; //remove this line
color: #ffffff;
background-color: #B9D3EE;
}
Demo