This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
My dropdown is not working. Following is the css and html code.
#nav {
display: block;
background: transparent url(../images/nav_bg.jpg) repeat-x left top;
padding: 0;
margin: 0;
height: 34px;
z-index: 100;
position: relative;
width: 100%;
list-style: none;
text-align: center;
}
#nav li {
text-align: center;
display: block;
float: left;
height: 34px;
margin: 0;
padding: 0;
position: relative;
background: url(../images/nav_sep.jpg) no-repeat 0 0;
}
#nav li a {
float: left;
height: 25px;
padding: 0 15px;
padding-top: 9px;
color: #ccc;
font-size: 0.9em;
margin-left: 2px;
}
#nav li a:hover {
background: url(../images/nav_over.jpg) repeat-x 0 0;
color: white;
}
#nav li a.active {
background: url(../images/nav_over.jpg) repeat-x 0 0;
color: white;
font-weight: bold;
}
#nav li.sep {
background: url(../images/nav_sep.jpg) no-repeat 0 0;
width: 2px;
height: 34px;
float: left;
}
#nav li.left {
background: url(../images/nav_l.jpg) no-repeat left top;
width: 36px;
height: 34px;
float: left;
}
#nav li.right {
background: url(../images/nav_r.jpg) no-repeat right top;
width: 36px;
height: 34px;
float: right;
}
#nav li ul {
display: none;
width: 170px;
position: absolute;
top: 34px;
left: 0;
margin: 0;
padding: 0;
/* Transparent background for drop down menu */
background:transparent filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.90;
}
#nav li ul li {
border: 0;
height: 25px;
color: #99FF00;
background: #111;
margin: 0;
}
#nav li ul li a {
display: block;
height: 25px;
width: 140px;
padding: 0 20px 0 15px;
border-top: 1px #333 solid;
white-space: nowrap;
background: #000;
color: white;
text-align: left;
line-height: 25px;
font-weight: normal;
}
#nav li ul li a:hover {
color: #99FF00;
background: #111;
}
/* Hacks for Opera to fix the drop down menu problem */
html:first-child #nav li a {
float: none;
height: 34px;
padding-top: 0;
line-height: 34px;
display: block;
}
html:first-child #nav li ul li a {
height: 25px;
line-height: 25px;
}
and HTML is
<ul id="nav">
<li class="left"> </li>
<li><a class="active" href="#">Home</a></li>
<li> Discussion Panel<img src="/Images/nav_bullet.jpg" alt="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li> Meeting Scheduler<img src="/Images/nav_bullet.jpg" alt="">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>Reserve Project</li>
<li>Submit Artifact</li>
<li>Attendance</li>
<li>Contact Us</li>
<li class="sep"> </li>
<li class="right"> </li>
</ul>
I want when I hover the mouse on Discussion Panel, dropdown list should be render.
You never actually display the sub ul on hover:
#nav li:hover ul {
display: block;
}
http://jsfiddle.net/ExplosionPIlls/gGBW4/
Related
I'm having trouble writing a code for a simple drop down menu but cant understand what I'm doing wrong still new to coding. Whenever I bring my cursor over the respective dropdown li tag the hover color effect is there but nothing comes down. In a previous attempt when the code was a a little different the list id appeared but it was in an inline manner and was align horizontally not vertically plz help.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li id="main">Home</li>
<li id="main">Products</li>
<li id="main">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
First of all, you have id="main" applied to multiple elements. id is meant to be unique and applied to only one element.
Second, your hover effect was just a little incomplete. See my changes below.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
/*overflow: hidden; don't do this if you want dropdowns */
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
#nav>li>a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
#nav>li>a:hover {
background-color: #d3d3d3;
color: black;
}
#nav>li {
position: relative;
display: inline-block;
}
#nav>li ul {
display: none;
position: absolute;
}
#nav>li:hover ul {
display: block;
bottom: -80px;
padding: 10px;
left: 0;
min-width: 100px;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li>Home</li>
<li>Products</li>
<li>More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li>About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
you need to target ul li ul which you will show and hide ... and #main id can not be duplicate on the same page.. working example as below
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li{display: inherit;}
ul li ul {
display: none;
width: auto;
position: absolute;
top: 35px;
background: #ccc;
margin: 0;
padding: 0;
}
ul li ul li{display:block; list-style-type:none}
ul li:hover ul {
display: block;
z-index:1000;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li class="nestedchild">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
Your css should be like that.
.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu {
background-color:red;
}
.bottom-line {
border-bottom:5px solid pink;
}
#navbar{
background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;
}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
#main{
display: inline;
}
a{
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover{
background-color: #d3d3d3;
color: black;
}
ul li {
float: left;
position: relative;
}
ul li ul {
display: none;
position: absolute;
list-style: none;
top: 32px;
z-index: 5;
background-color: #ddd;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
and You can also see demo here
my code of menu work fine, but only text is a href, how ever i try to make it a bit more user friendly so make even background in to work as href but its not working, can somebody help me to fix it?
My HTML:
<div id="menu">
<ul>
<li>GAMESITES<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>HRY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>SERVERY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>CLANKY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FORUM<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>DOWNLOADS<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>BLOGY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FLASHOVKY<span class="arrow"></span></li>
</ul>
</div>
My CSS:
#menu{
background-image: url("images/menubg.png");
background-repeat: repeat-x;
height: 44px;
width: 983px;
margin: 0 22px;
}
.spacer{
background-image: url("images/menu_spacer.png");
background-repeat: no-repeat;
width: 1px;
height: 25px;
margin: 0px 12px;
}
#menu ul{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
}
#menu ul li{
padding: 0px 5px 0px 0px;
display: inline-block;
color: #f7f7f7;
}
.arrow{
background-image: url("images/sipka.png");
background-repeat: no-repeat;
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Live preview: http://funedit.com/andurit/try4/
Your markup can be heavily simplified into this:
<div id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</div>
Flexbox solution
If you're willing to explore modern CSS specifications, you can always use flexbox instead of relying on inline-block to position your elements — check out the demo fiddle here: http://jsfiddle.net/teddyrised/9FZS8/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
flex: 1 1 auto;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
display: block;
padding: 14px 0;
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Non-Flexbox solution
Otherwise, you can always fallback to floating your individual <a> elements, but that requires you to calculate the padding for each of them carefully so the menu does not overflow: http://jsfiddle.net/teddyrised/9FZS8/2/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu ul li {
color: #f7f7f7;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Add to your links a padding of x and a margin of -x, for example:
#menu a {
padding: 20px;
margin: -20px;
}
Make link to take full space:
li > a{
display:inline-block;
width: 100%;
height: 100%;
}
currently, my add subject, drop subject, delete subject, manual crawl in the submenu is not centralised even though i have specified it to be text-align center in #menu li li a. The sub menu's executive summary is also cut off. May I know how can i expand the submenu and centralise all my text?
Thank you!
Here is my code (i am really sorry because i do not have a jsfiddle acct and is on the waiting list):
HTML
<div id="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li>Add Subject</li>
<li>Delete Subject</li>
<li> Edit Subject</li>
<li><a href="#" >Manual Crawl</a></li>
<li><a href="#" >Executive Summary</a></li>
</ul>
</li>
</ul>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu li li a:hover{
background: rgba(255,255,255,0.5);
}
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul ul {
display: none;
width: 11em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 0px;
color: #fff;
text-align: center;
}
#menu li li a:hover{
background: rgba(255,255,255,0.5);
}
add styling
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 13px;
margin: 0 3px;
display: block;
color: #fff;
text-align: center;
}
Your <a> having only left padding but it has to be from both right-left or you could remove padding
Is there a particular way to make a <ul> a height? I have this structure:
<ul class="dropdown">
<li></li>
<li></li>
<li></li>
<li>
<ul id="sub_menu1"> // I have 4 of these
<li></li>
<li></li>
</ul>
</li>
</ul>
CSS:
ul.dropdown {
font-family: 'CapsuulaRegular', Arial, sans-serif;
position: relative;
padding: 0;
margin: 0;
z-index: 1;
}
ul.dropdown li a {
color: #b38201;
font-size: 18px;
}
ul.dropdown li {
display: block;
float: left;
color: #b38201;
font-weight: normal;
text-transform: uppercase;
padding: 38px 10px 12px 7px;
margin-left: 2px;
}
ul.dropdown a:hover {
color: #002565;
background-image: url(../images/menu-hover.png);
background-position: 50% 100%;
background-repeat: no-repeat;
}
.navSelected {
color: #002565;
background-image: url(../images/menu-hover.png);
background-position: 50% 100%;
padding:0;
margin:0;
background-repeat: no-repeat;
}
ul.dropdown a:active {
color: #ffa500;
}
ul.dropdown li a {
padding: 38px 7px 12px 7px;
}
ul.dropdown li:last-child a {
border-right: none;
}
/* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
color: black;
position: relative;
}
ul.dropdown li.hover a {
color: black;
}
/* LEVEL TWO */
#sub_menu1 {
width: 175px;
position: absolute;
left: -175px;
}
#sub_menu2 {
width: 175px;
position: absolute;
left: 0px;
}
#sub_menu3 {
width: 175px;
position: absolute;
left: 175px;
}
#sub_menu4 {
width: 175px;
position: absolute;
left: 200px;
}
ul.dropdown ul {
visibility: hidden;
position: relative;
top: 100%;
left: 0px;
font-size: 10px !important;
padding: 0;
margin: 0;
display: block;
}
ul.dropdown ul li {
background: #ccc;
}
ul.dropdown ul li {
font-weight: normal;
background: #f1f3f7;
color: #000;
/*border-bottom: 1px solid #ccc;*/
float: none;
padding: 10px;
margin: 0;
text-transform: none;
}
I having trouble making the <ul> that are hovered the same height. The go depending on what content is in them.
I want all the menus to be the same height, or within a wrapper of fixed height/width..
does this solve your question?
ul { height: 150px; }
if you apply this, all of your ul's will have the height of 150 pixels.
Edit
Well, you're using floating. Floating elements are ignored in the flow of the document. To overcome this problem you should add a overflow: hidden; to your ul.dropdown
I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)