I have a verticle navigation bar that has options that appear after you hover over the first option. When I have margins to the left, you see a circle bullet point appear before the first bullet. Anyone have a fix for this? I can't seem to fix it.
.nav
{
margin-left: 30px;
}
.nav li {
list-style:none !important;
color:black;
font-size:30px;
text-decoration:none;
}
.nav ul {
padding:0;
margin:0;
background-color: white;
}
.nav ul li {
list-style: none !important;
float:left;
}
li > a
{
background-image: url("media/pics/triangle.png");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: right -10px;
}
li > a:only-child
{
background-image: none;
list-style-type: none;
}
.nav ul li a {
color:black;
font-size:30px;
text-decoration:none;
}
.nav li a:hover {
}
.nav ul li ul { display:none; } /* Makes the Dropdown menu Hidden by default */
.nav ul li:hover ul { /* Displayes the Dropdown menu when Hovered over the specific navigation item */
z-index:99999;
display:list-item !important;
position:absolute;
}
.nav ul li:hover ul li {
float:none;
list-style:none !important;
}
http://jsfiddle.net/zsPE9/
It's because of display:list-item !important added on :hover of .nav ul li.
You would use display:block, or something other than list-item.
.nav ul li:hover ul {
z-index:99999;
display:block; /* Changed from display:list-item !important */
position:absolute;
}
UPDATED EXAMPLE
Also, you should avoid usage of !important when possible. It essentially removes the cascade nature from CSS.
You have display set on list-item. That is probably what is causing your problem. Instead, maybe use block or inline. See other options here: http://www.w3schools.com/cssref/pr_class_display.asp. Also, next time please just post the code that is causing the issue :).
Related
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)
I've got a simple menu that should show a sub-menu vertically. However, i changed this menu to be in order to center it, and it now doesn't show vertically but horizontally.
Here is my codepen :
http://codepen.io/anon/pen/NGwmGq
.navitem{
height: 30px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
background-color:black;
display: inline-block;
padding: 0;
vertical-align: middle;
}
#menu li a {
display:block;
width:125px;
color:white;
text-decoration:none;
line-height:30px
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:30px;
margin-top: 30px;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
/* Logo */
#logo{
height: 190px;
width: 266px;
background-color:black;
margin: 0 30px;
}
/* Fin MENU */
As you can see, the "portfolio" actually shows the sub-menu but this sub-menu should be vertically aligned.
You seem to have deleted the positioning context on the li
#menu li {
background-color: black;
display: inline-block;
padding: 0;
vertical-align: middle;
position: relative; /* add this */
}
For li you have given display as inline-block that,s why they are coming in one line. so for portfolio submenu Write this css in your css file
#menu ul li ul li {
display: block;
}
In your css, you're making all main menu items inline using #menu li selector, which is also applied for lis in sub menu.
So you've to explicitly specify display: block for sub menu lis
Change your code as given below.
#menu li:hover ul li {
float:none;
display:block;
}
Just Add display:block to your sub menu li.
#menu li:hover ul li {
float:none;
display:block; /* Add This */
}
UPDATED : EXPLANATION
1) display:block; property is a block property in HTML. So every element with such property takes a new line(Elements views Vertically).
2) display:inline-block; property is a block but inline property. So elements which such property appears on same single line(Elements views Horizontally).
Working : Fiddle
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 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;
}
The following code creates a NAV bar with hover lists.
The hover works but I have to move my mouse quickly down the hover list to make sure it stays open on hover - ie it flashes off very quickly . Do I need to squeeze the top of the hover closer to the main NAV bar ? Any help much appreciated.
/* Navigation Style */
.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; }
/* Basic List Styling (First/Base Level) */
.dropdown ul {padding:0; margin:0; list-style: none;}
.dropdown ul li {float:left; position:relative;}
.dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}
.dropdown ul li a:hover {color:#ffffff; background:#232323;}
/* Second Level Drop Down Menu */
.dropdown ul li ul {display: none;}
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;}
.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; }
.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}
/* Third Level Drop Down Menu */
.dropdown ul li:hover ul li ul {display: none;}
.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }
The actual NAV bar HTML is
<div class="dropdown">
<ul>
<li>About</li>
<li>Steam Rail Tours
<ul>
<li>All Rail Tours</li>
<li>British Pullman (VSOE)</li>
</ul>
</li>
</ul>
</div>
The problem is that your dropdown menu is 1px away from your static menu. Can be fixed by changing this one line of code:
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:40px; min-width:150px; left:0;}
I changed 41px to 40px.
http://jsfiddle.net/eqH2Q/1/
Live Demo
Just add this simple rule:
.dropdown>ul>li>a:hover {
margin-bottom:20px;
}
This way when you hover the button, it gets an invisible bottom margin that will extend the area that triggers the hover event. This works with multiple dropdowns as the demo shows.
Try this line :
li:not(:hover) li {
display: none;
}
And get rid of all display: none and other hovers. It will make sublist's open when their partent list's li element is hovered, and you can add as many sublists as you want, without changing the CSS