I am working on a HTML/CSS drop down menu and now whenever I hover my mouse over the top of the menu not every entry is showing in the drop menu. The top one or two entries are always missing. Here is my HTML:
<!-- Navigation Bar -->
<ul id="navi">
<li>Engines
<ul>
<li>DiniJS</li>
<li>Foxen2D</li>
<li>Vivon3D</li>
</ul>
</li>
<li>Team
<ul>
<li>Rob Myers</li>
<li>Nate Mast</li>
</ul>
</li>
<li>Contact
<ul>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
and here is the CSS:
#navi ul {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
float:left;
width:120px;
padding-top: 13px;
padding-bottom:8px;
background-color:black;
text-align:center;
font-family:"Courier New";
}
#navi li:hover {
background-color:#303030;
}
#navi li ul li {
float:none;
width:116px;
text-align:left;
padding-left:4px;
border-top:1px solid #303030;
display:none;
font-size:85%;
position:absolute;
z-index:2;
}
#navi li:hover ul li {
display:block;
}
#navi a {
text-decoration:none;
color:red;
}
I am open to any Javascript or JQuery suggestions if that is a better way to go about fixing this. Thank you.
Your problem is that all of the submenu items are stacking one on top of another. Simply moving position: absolute; from the #navi li ul li block to a new #navi li ul block should fix this.
When using nested list items. use class names to target. for your menu use class="sub"
for submenu (ul) and set display none and absolute for the sub ul and not for the li.
Related
Looking to find out how to change a single nav link to have a different background hover color than the others.
I've tried #nav #contact.hover and #nav #contact:hover to no avail.
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
</html>
CSS:
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li a:hover {
background-color:black;
}
Should change the contact element in the nav to have a background hover color of white
Just have to get the selector right. I think you were having issues because your base style for hover is overly specific which trumps most overrides.
#nav ul li:hover a
...could easily be changed to simpler selector that would be easier to override, the use of ID's instead of classes adds to the specificity issue as well.
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li:hover a {
background-color:black;
}
#nav ul li#contact:hover a {
background: url('https://picsum.photos/100');
}
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
You can accomplish this by using the :last-child psuedo-class in your CSS.
Here's a codepen with the fix but I'll describe below what I did: https://codepen.io/Athys/pen/WBdYdZ
I added :last-child to the li selector since the "contact" link appears as the last list item (the last li). Then, I added a :hover psuedo-class to the a selector and give it a different hover color and text-color than the other a elements. Hope this helps.
I am developing a website.
On a menu section I added a sub menu.
On the sub menu, under PRODUCTS, I can't click on Air Sourced Heat Pump.
Can anyone help me?
This is my website: http://develop.com.sg/Enerprof/
This is because you have a hover action when hovering IVolt...
When you get over it, another submenu appears between IVolt and Air Sourced Heat Pump.
When getting "out" of this submenu, the IVolt menu disappears, and the Air Source option gets back to its inital position. At that moment, your cursor is OUT of the "Products" menu you want to reach...
If you want to change "no" code, (AND if your Air Source option IS NOT a submenu as IVolt is...) you just have to place it in first position in your Products menu...
Btw, we need some code to help you more...
You Give the hover effect in child node. so when you hover your mouse control he close the your submenu. change the css effect.
<ul>
<li>Spices
<ul>
<li>Ajwain Seed</li>
<li>Cardmom</li>
<li>Coriander</li>
<li>Cumin Seed</li>
<li>Dill Seed</li>
<li>Fennel Seed</li>
<li>Fenugreek</li>
<li>Red Chilli</li>
<li>Turmeric</li>
</ul>
</li>
<li>Pulses
<ul>
<li>Red Lentils</li>
<li>Green Peas</li>
<li>Cheak Peas</li>
</ul>
</li>
<li>Oil Seeds
<ul>
<li>Sesame seed</li>
<li>Rapeseeds</li>
<li>Niger Seed</li>
<li>Groundnut</li>
</ul>
</li>
<li>Grains
<ul>
<li>Maize</li>
<li>Wheat</li>
<li>Rice</li>
<li>Millet</li>
</ul>
</li>
<li>Cotton
<ul>
<li>Raw Cotton</li>
<li>Cotton Linter</li>
</ul>
</li>
<li>Animal Feed Products
<ul>
<li>houss.php</li>
<li>Rape Seed Meal</li>
<li>Soyabean Meal</li>
</ul>
</li>
</ul>
CSS :
.content2{width:883px; margin-top:5px; height:auto; margin:auto;}
.gallery-left{width:630px; height:323px; border:8px solid #f5f4f2; float:left;}
.prod-menu-right{width:210px; height:323px; border:8px solid #f5f4f2; float:right; background:url(../images/prod-menu-bg.png) repeat-x #74c305;}
.prod-menu-right h1{font-size:21px; color:white; text-align:center; margin-top:0px; font-family:"Times New Roman", Times, serif;}
.prod-menu-right ul{list-style:url(../images/arrow.png); margin:0px 25px 0px 25px; padding:0; font-size:12px;}
.prod-menu-right li{ height:25px; line-height:14px; padding-top:10px}
.prod-menu-right ul li a{color:#FFF; line-height:14px ;text-decoration:none;}
.prod-menu-right ul li a:hover{color:#333; text-decoration:underline}
.prod-menu-right li:hover{position:relative;z-index:1000; }
.prod-menu-right li:hover ul{margin-left:0px; margin-top:1px; text-align:left; width:180px;}
.prod-menu-right li:hover ul li{min-width:180px; position:relative;}
.prod-menu-right li:hover ul li a{border-bottom: 1px dotted; padding:10px 25px; color: #FFFFFF; display:block; font-size: 12px; line-height:14px; text-decoration:none; background-color:#669933;}
.prod-menu-right li:hover ul li a:hover {text-decoration:none; color:#fff; line-height:14px; background-color:#333; position:relative;}
.prod-menu-right ul li ul li { position:relative; display:inline-block;}
.prod-menu-right ul li ul li a{ display:none;}
Add <ul><li> Code and use this css to simple implement the menu... with your site..
I'm working on a dropdown box but the only thing that doenst want to work is when I hover over the word Info in the unordered list the dropdownbox is not displayed.
I know I have display:none; in ul style but can you change that to display:block; when hovered over the word info?
HTML Code:
<ul id="Menu">
<li>Home </li>
<li>Info
<ul style="display:none;">
<li>Program</li>
<li>Getting Started<li>
<li>Credits</li>
</ul>
</li>
<li>Video </li>
<li>server </li>
<li>Profile </li>
<li>Help</li>
</ul>
CSS Code:
#Menu {
list-style:none;
font-size:16px;
font-weight:Bold;
padding:14px 0 0;
width:415px;
margin-top:0;
float:left;
margin-left:0;
}
#menu { list-style:none;}
li:hover > ul {display:list-item;}
li ul { margin:0; padding:0; position:absolute;z-index:5;padding-top:6px;}
li { float:left; margin-left:10px; }
li ul li { float:none; margin:0; display:inline;}
li ul li a {display:block; padding:6px 10px; background:#333; white-space:nowrap;}
li { display: list-item; text-align: -webkit-match-parent;}
ul { border:0; font-size:100%; font:inherit;vertical-align:baseline;}
Help in advanced. any help is apreciated :)
also post a code not only telling me whats wrong thanks!
use #Menu before your css class names : DEMO
like: #Menu li:hover > ul {display:list-item;}
NOTIC: css Class names are Case-Sensitive
I am thinking this is because the html code contains an inline display:none.
In the inner <ul>, we should remove <ul style="display:none;"> in the above html.
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I'm learning to make a vertical menu using only css (I must say most of this code was copied from google).
When I put mouse over list1, items display in the back, and LargeNameList2 is over items of list1(since "LongNameList2" has a longer name) . So what i need are 1 of 2 things(or both if possible):
-How to "bring to front" list items?, so they display over LargeNameList2.
-How to make the other lists that are below(list 2 and 3) go down when I put mouse over list1?(and list3 when I mouseover list2)?
Code HTML:
<head runat="server">
<title></title>
<style type="text/css">
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
#nav li{
margin-right:10px;
position:relative;
}
#nav a{
/*display:block;*/
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0);/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:5px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
</style>
</head>
<body>
<ul id="nav">
<li>
List1›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<br />
<br />
<li >
LongNameList2›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<br />
<br />
<li>
List3›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
</ul>
</body>
You should add position:relative and z-index: 101 to your ul to make both of those things happen:
#nav li:hover ul{
left:0;
position: relative;
z-index: 101;
}
Here is a fiddle: http://jsfiddle.net/pj9Gd/
Add z-index to this -
#nav li:hover ul{
left:0;
z-index:1000; // Added this line.
}
z-index is the z coordinate of the item. Positive for nearer and negative for farther from user.