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.
Related
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.
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.
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 have made a multi tier navigation menu and have an issue where tiers below tier 1 have an unexpected block to the left of the options. I assume the issue stems from having a background gradient but have not been able to resolve the issue so far. Can anyone shed any light on this for me please?
have put a link below.
http://tinypic.com/r/2pr7alj/5
The HTML code below:
<div id="menu">
<ul class="menu1"><!--Start of menu level 1-->
<li>#Html.ActionLink("Home","#","Home")
</li>
<li>#Html.ActionLink("A","#","A")
<li>#Html.ActionLink("B","#","B")
<ul class="menu2"><!--Start of menu level 2-->
<li>#Html.ActionLink("1","#","1")
<li>#Html.ActionLink("2","#","2")
<li>#Html.ActionLink("3","#","3")
</li><!--End of menu level 2-->
</ul>
</li>
<li>#Html.ActionLink("C","#","C")
</li>
</ul><!--End of menu level 1-->
</div>
Below is the CSS related to the menu.
#menu {
width:100%;
height:44px;
background: linear-gradient(to bottom, #7db9e8 19%,#2989d8 51%,#1e5799 67%,#1e5799 81%,#207cca 100%);}
ul.menu1 {
list-style-type:none;
float:left;
margin-top:0px;}
ul.menu2, ul.menu3, ul.menu4{
list-style-type:none;}
ul li {
float:left;
width:200px;
position:relative;}
ul li a {
text-decoration:none;
font-size:1em;
color:#fff;
font-weight:bold;
display:block;
padding: 5px 5px 5px 5px;
margin:0px;
line-height:32px;
border:1px solid;
text-align:center;
white-space:nowrap;}
ul.menu2 {
display:none;
position:absolute;
left:-40px;}
ul.menu3, ul.menu4 {
display:none;
position:absolute;
left:160px;
top:0px;}
ul li:hover ul.menu2 {
display:block;
background-color:#2472bb;}
ul ul li:hover ul.menu3 {
display:block;
background-color:#2472bb;}
ul ul ul li:hover ul.menu4 {
display:block;
background-color:#2472bb;}
ul li:hover > a {
background-color:#839ab6;}
ul li:hover a:hover {
background-color:#538dd5;}
There's extra left padding to your menu1, menu2, etc. for some reason. Not sure how. But all you need to do is set padding-left to 0:
ul.menu1, ul.menu2, ul.menu3, ul.menu4{
padding-left:0;
}
And remove "left:-40" from ul.menu2{...} to make it look nice.
I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code)
when hover is fired. I'm badly stuck here, please help me out.
I also tried the visibility property instead of display. I could see only
menu1, menu2, menu3 in browser horizontally and nothing else.
I'm using IE7 on XP SP3.
CSS:
#navMenu ul{
argin:0;
padding:0;
}
#navMenu li {
margin:px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li : hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
HTML:
<div id="wrapper" >
<div id="navMenu">
<ul>
<li>menu1
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu2
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu3
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</ul>
</div>
</div>
JSFiddle
There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.
Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li {
margin:0px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li:hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}