I am new to css, and have tried to make this work for a while with no luck
basically i want to display a drop down when "MENU" is selected but nothing seems to happen here is my css:
#tabs {
margin-top:-12ex;
float:left;
width:100%;
font-size:100%;
line-height:10px;
vertical-align:top;
margin-left:20px;
position:static;
}
#tabs ul {
margin:0;
padding:1px 1px 0 20px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:5;
}
#tabs a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:10px 10px 10px 10px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover{
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
div#tabs ul ul,
div#tabs ul li:hover ul ul,
div#tabs ul ul li:hover ul ul
{display: none;}
div#tabs ul li:hover ul,
div#tabs ul ul li:hover ul,
div#tabs ul ul ul li:hover ul
{display: block;}
Here is my html
<body>
<div id="wrapper">
<table height="860px">
<tr>
<td colspan="2" width="710px" height="150px">
</td>
</tr>
<tr>
<td colspan="2" width="710px" height="50px" valign="bottom">
<div id="tabs">
<ul>
<li><span>HOME</span></li>
<li><span>CATERING</span></li>
<li><span>MENU</span></li>
<ul>
<li>
<span>hey</span> //i want this to pop when hovering menu
<li>
</ul>
<li><span>RESERVATIONS</span></li>
<li><span>EVENTS</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
Well once I fixed the few typos. I realised that you hadn't put the sub menu inside the <li> of the MENU.
here's the new list html, the css is fine for now:
<div id="tabs">
<ul>
<li><span>HOME</span></li>
<li><span>CATERING</span></li>
<li><span>MENU</span>
<ul>
<li>
<span>hey</span>
</li>
</ul>
</li>
<li><span>RESERVATIONS</span></li>
<li><span>EVENTS</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
</ul>
</div>
Edit:
You need to make the inside <ul> appear absolute in the css, something like this:
#tabs {
width:100%;
}
#tabs>ul>li {
display:block; position:relative;
float:left;
list-style:none outside;
margin:0 10px;
}
#tabs>ul>li:hover ul{display:block}
#tabs>ul>li>a{
display:block;
}
#tabs>ul>li ul{
position:absolute; display:none;
list-style:none;
}
You need to put that secondary list inside your menu, like this:
<li>
<span>MENU</span></li>
<ul>
<li>
<span>hey</span>
</li>
</ul>
</li>
Also, remember to use the css selector > when you want to put rules on the first list only:
#tabs>ul>li{
/* css */
}
Related
I cannot get my drop down menu items to display correctly. Each items in the list (4 of them) appear on top of each other. Any help is greatly appreciated.
this is my html:
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
and css:
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
top:15px;
left:0;
}
ul li ul li {
display:block;
float:none;
position:absolute;
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover
{
color:#E56038;
}
Many thanks in advance for your help
Remove 'position:absolute' and add 'clear:both; overflow:auto;' to the ul li ul li
Fiddle: http://jsfiddle.net/kc79mwbr/
<style>
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
/* display:block;
*/
/* float:left;
*/
padding:0px 15px;
}
nav ul li ul {
display: none;
/* position:relative;
*/
top:15px;
left:0;
}
ul li ul li {
/* display:block;
*/
/* float:left;
*/
/* position:relative;
*/
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
/* position:relative;
*/
/* float:left;
*/
}
nav ul li a:hover
{
color:#E56038;
}
/*span,a,li{
display:block;
}*/
</style>
<nav>
<ul >
<li>
<a href='#'>
<span>
SERVICES
</span>
</a>
<ul>
<li>
<a href='../escuela_eng.html'>
<span>
Equest Sch
</span>
</a>
</li>
<li>
<a href='../hst_eng.html'>
<span>
Horse Assist
</span>
</a>
</li>
<li>
<a href='../car_eng.html'>
<span>
Care and Recuperation
</span>
</a>
</li>
<li>
<a href='../ht_eng.html'>
<span>
Training
</span>
</a>
</li>
</ul>
</ul>
</nav>
I commented out a lot of the positioning and floating. I think they were causing problems. You could put a max-width on the menu if you wish it to be a certain width.
Please try this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
nav {
position:absolute;
right:0px;
/*bottom:0;*/
left:-.7em;
}
nav ul{
list-style:none;
}
nav ul li{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
/*you will need set top margine in such a way that there wont be any blank space between parent menu item and sub menu items*/
top:15px;
left:0;
/*line below will prevent displacement of submenu towards right*/
padding-left: 0;
}
ul li ul li {
display:block;
float:none;
/*position:absolute;*/
background: #F0EFE7;
padding:0px 10px;
overflow: auto;
clear: both;
}
ul li:hover ul {
display:block;
position:relative;
/*margin-left:-17px; */
}
nav ul li a{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover{
color:#E56038;
}
</style>
</head>
<body>
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
</body>
</html>
You will see following changes
ul li ul li doesn't need to have position:absolute - this was the main reason behind sub-menu items were overlapping each other.
Only for testing purpose I have commented nav's bottom:0;
Few of the suggestions
Please apply classes to ul's and li's
Manage padding and magines more efficiently.
Please refer following links for more info
StackExchange for Submenu CSS
CSS-Tricks for Submenu CSS
Your concerns
I have tested this code in Firefox and I can select the menu items.
Displacement of Sub-menu items has been taken care of in the updated code provided in the answer
To prevent certain alignment / float issues (with referenced to Latest Evetns and Contact) links you will need to test it with FLOAT attributes.
Background color (red) misses out after I am hovering drop down items.
What should I do to keep the background color of the menu item I am in?
<style>
nav ul
{
list-style-type:none;
padding:0px;
text-align:center;
background-color:grey;
}
nav ul li
{
display:inline-block;
}
nav ul a
{
display:block;
padding:20px;
padding-left:50px;
padding-right:50px;
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:arial;
font-size:20px;
}
nav ul a:hover
{
background:red;
}
nav ul ul {
display: none;
}
nav ul li:hover ul{
display:block;
position:absolute;
}
nav ul ul li
{
display:block;
border-bottom:solid 1px black;
}
</style>
</head>
<body>
<nav>
<ul>
<li>one</li>
<li>two
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>three
<ul>
<li>ay</li>
<li>bee</li>
</ul>
</li>
<li>four</li>
</ul>
</nav>
</body>
This is because the parent li is not attracting the :hover, so a hover on the child submenu doesn't keep it active. As such, you need to move the style change to the li:hover instead of the a child, as the submenu is an sibling of the a and not direct child.
Change:
nav ul a:hover {
background:red;
}
To:
nav ul li:hover {
background:red;
}
Demo Fiddle
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
I can't seem to make the drop-down <ul> align with it's parent <li>.
What am I doing wrong?
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {display: block;
position:absolute;
}
Fiddle
ul elements have a default padding-left value applied by the user-agent, so by removing that you get the alignment you asked for (There is also a margin added by you, but I'm gonna ignored it since you've added it yourself).
#toolbar ul {
padding-left: 0;
}
or (if you want to target only the sub-menu):
#toolbar ul ul {
padding-left: 0;
}
Demo
What adonis said was absolutely correct. There are certain other elements which take default padding and margin. So try using reset before styling any element.
*{margin:0;padding:0;}
if no list item of your page wants default bullets you may also include list-style:none in the above reset lines of code.
There is margin and padding in this case (you add the margin yourself) which is affecting it.
View here for a fix
(this has outlines for more visual proof)
CSS:
#toolbar ul {
padding: 0;
list-style-type:none;
}
#toolbar ul > li {
display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {
display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul ul > li {
margin: 0;
}
Try this one i have pasted the code here
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul li:hover ul li{
margin-left: -30px;
}
I've created a drop down navigation in html. I then tested it with different browser such as chrome, firefox, opera and IE. The only problem I see is that the navigation doesn't display right in IE.
HTML:
<div id="nav_bar">
<ul id="nav">
<li>Home</li>
<li>Krazie
<ul>
<li>Colour</li>
<br />
<li>Black 'N' Grey</li>
</ul>
</li>
<!-- End of Krazie links -->
<li>Stacy
<ul>
<li>Colour</li>
<br />
<li>Black 'N' Grey</li>
</ul>
</li>
<!-- End of stacy links -->
<li>Matt
<ul>
<li>Colour</li>
<br />
<li>Black 'N' Grey</li>
</ul>
</li>
<!-- End of matt links -->
<li>Contact</li>
</ul>
</div>
CSS:
#nav
{
margin-top:-0px;
background:rgb(108,108,108);
position:fixed;
top:0;
left:0;
z-index:10;
width:100%;
z-index:9003;
height:32px;
list-style:none;
color:#FFF;
}
#nav li
{
float: left;
list-style:none;
}
#nav li a
{
display: block;
height:2em;
line-height:2em;
padding:0px 10px;
text-decoration:none;
list-style:none;
color:#FFF;
}
#nav ul
{
padding:0px;
margin-left:-20px;
background:rgb(108,108,108);
position:absolute;
display:none;
z-index:9003;
list-style:none;
}
#nav ul li a
{
padding:-50px;
width:110px;
list-style:none;
}
#nav li:hover ul
{
display:block;
list-style:none;
}
#nav > li:hover > a
{
background:rgb(108,108,108);
}
#nav ul li:hover a
{
background:rgb(48,48,50);
}
The bit that doesn't display properly is the actual links that you see when you put the mouse over them. This is how it shows on other browser like chrome: http://grab.by/e5ik
but in IE it displays as: http://grab.by/e5im
Your codes seems too complicated to get your work done.
Btw, please remove <br /> in html.
Then, add the following CSS: (between #nav ul and #nav ul li a)
#nav ul li {
clear: both;
}
(tested in IE8)
Please check again in the browsers whether any error occurs.
change this-
#nav ul li a
{
padding:-50px;
width:110px;
list-style:none;
}
#nav li:hover ul
{
display:block;
list-style:none;
}
#nav > li:hover > a
{
background:rgb(108,108,108);
}
#nav ul li:hover a
{
background:rgb(48,48,50);
}
to this-
#nav ul li a
{
padding:-50px;
width:110px;
list-style:none;
display:block
}
#nav a:hover ul
{
display:block;
list-style:none;
}
#nav > li > a:hover
{
background:rgb(108,108,108);
}
#nav ul li a:hover
{
background:rgb(48,48,50);
}
sometimes ie doesn't recognize hovering over elements except a elements.