I have a vertical UL list on a html page, with a sublist inside of it. At the end of the sublist, it has an unwanted gap, like a linebreak, though I can't seem to find anything in my css or html that would cause it (and my attempts at trying to get it to go away aren't working very well).
Here's what it looks like;
1. Item
2. Item
1. Sub Item
2. Sub Item
3. Item
4. Item
My html code:
<ul class="fic">
<li class="fic"><a href="">item</li>
<li class="fic"><a href="">item
<ul class="fic">
<li class="fic">item</li>
<li class="fic">item</li>
</ul>
</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item
<ul class="fic">
<li class="fic">item</li>
</ul></li>
</ul>
And my css code that I was trying to use;
.fic ul {
padding: 0px;
margin: 0px;
}
And since my template came with menu code for the ul used in the navigation bar, here's that;
#menu ul {
display: block;
width: 778px;
margin: 0em auto;
list-style: none;
padding-left: 2.5em;
}
#menu li {
display: inline;
}
#menu li a {
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
}
#menu li a:hover {
background: #342117 url('images/hover.gif') top left repeat-x;
color: #fffdc6;
}
html code for navigation menu;
<div id="menu">
<ul>
<li class="first">Home</li>
<li>Fan Art</li>
<li>Fan Fiction</li>
<li>Fan Videos</li>
<li>Other</li>
<li>Forum</li>
</ul>
</div>
Help would be appreciated, thank you.
The menu styles are the culprit, need full code
Related
I'm trying to get a drop down menu for my navbar so that when I hover over the tabs it opens a drop down menu with more options. Here is a fiddle of my code. The very final product should look like this, for now I just want to fix the drop down on hover part of it.
Here is a snippet of code im using in css to try and achieve this:
.dropdown {
display: none
}
.navbar-list li:hover .dropdown {
display: relative;
color: white;
text-decoration: none;
}
You are trying wrong approach, please change your css part
.navbar-list li:hover .dropdown {
display: block;
color: white;
text-decoration: none;
}
<ul class="navbar-list">
<li class="navbar-tags">OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
update code
Your HTML structure is wrong, and you need to use display: block on hover, not display: relative
But re: the HTML, a ul can't be a direct child of a ul. You need to nest the dropdowns in an li. That is not only correct markup, but it allows the hover to persist when you hover over an li that has nested menus. Otherwise, you would need to use li:hover + .dropdown to show the next .dropdown menu, but your :hover will stop once your mouse moves off of the li.
Also, each ul.dropdown that is in a single nested nav element could probably just be li's of a single ul, but what you have isn't incorrect, so I didn't change that.
.dropdown {
display: none
}
.navbar-tags:hover > .dropdown {
display: block;
color: white;
text-decoration: none;
}
.navbar-list a {
color: black;
text-decoration: none;
}
.navbar-tags {
margin: 20px;
}
.navbar-tags, .dropdown {
padding: 0;
list-style-type: none;
}
<ul class="navbar-list">
<li class="navbar-tags">
OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
<li class="navbar-tags">PROGRAMS
<ul class="dropdown">
<li>Adventure Sport</li>
</ul>
<ul class="dropdown">
<li>Entertainment</li>
</ul>
<ul class="dropdown">
<li>Collegiate</li>
</ul>
<ul class="dropdown">
<li>Individual</li>
</ul>
<ul class="dropdown">
<li>Commercial</li>
</ul>
</li>
<li class="navbar-tags">RESEARCH
<ul class="dropdown">
<li>Corporate Survey</li>
</ul>
<ul class="dropdown">
<li>Individual Survey</li>
</ul>
</li>
<li class="navbar-tags">STORIES</li>
</ul>
1 ) Your HTML structure is wrong.
2) use display: block instead of display: relative.
Change your Code Like THis :
.dropdown {
display: none
}
.navbar-list li:hover > .dropdown {
display: block;
color: white;
text-decoration: none;
}
.navbar-list a {
color: black;
text-decoration: none;
}
.navbar-tags {
padding: 0;
list-style-type: none;
margin: 20px;
}
<ul class="navbar-list">
<li class="navbar-tags">OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
<li class="navbar-tags">PROGRAMS
<ul class="dropdown">
<li>Professional</li>
</ul>
<ul class="dropdown">
<li>Adventure Sport</li>
</ul>
<ul class="dropdown">
<li>Entertainment</li>
</ul>
<ul class="dropdown">
<li>Collegiate</li>
</ul>
<ul class="dropdown">
<li>Individual</li>
</ul>
<ul class="dropdown">
<li>Commercial</li>
</ul>
</li>
<li class="navbar-tags">RESEARCH
<ul class="dropdown">
<li>Corporate Survey</li>
</ul>
<ul class="dropdown">
<li>Individual Survey</li>
</ul>
</li>
<li class="navbar-tags">STORIES</li>
</ul>
I have written the code below to help me understand CSS stacking order but I am stuck.
In the page below when I hover over the link "Three" (id=link_three), I want the sub-menu to appear.
The sub-menu appears but the menubar gets distorted because the sub-menu is not stacked above the rest of the menubar. What are the stacking contexts and stacking orders here? And what is the proper way to make the sub-menu appear one level above?
<html>
<head>
<style>
<!--
* {
padding: 0;
border: 0;
margin: 0;
}
.menubar_ul {
list-style: none;
}
.menubar_ul_li,.menubar_ul_li_menu {
float: left;
padding: 0 10px 0 10px;
}
.menu_ul {
list-style: none;
display: none;
}
.menu_ul_li {
}
#link_three:hover>#menu_three {
display: block;
}
-->
</style>
</head>
<body>
<ul id="top_menubar" class="menubar_ul">
<li class="menubar_ul_li" id="link_one">One</li>
<li class="menubar_ul_li" id="link_two">Two</li>
<li class="menubar_ul_li_menu" id="link_three">Three
<ul class="menu_ul" id="menu_three">
<li class="menu_ul_li" id="menuitem_one">One</li>
<li class="menu_ul_li" id="menuitem_two">Two</li>
<li class="menu_ul_li" id="menuitem_three">
<!-- This is intentional: -->
Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li>
<li class="menu_ul_li" id="menuitem_four">Four</li>
<li class="menu_ul_li" id="menuitem_five">Five</li>
<li class="menu_ul_li" id="menuitem_six">Six</li>
</ul></li>
<li class="menubar_ul_li" id="link_four">Four</li>
<li class="menubar_ul_li" id="link_five">Five</li>
<li class="menubar_ul_li" id="link_six">Six</li>
</ul>
</body>
</html>
<!-- Just add "position:absolute;" to your css, this is going to be then -->
#link_three:hover>#menu_three {
display: block;
position:absolute;
}
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. Usually I am just copy paste existing code and try to make some adjustments to what I want. Anyway I am working on a navigation menu on a one-page website. So till now that works. However, I want to have a sub-menu. I tried some things, but I cannot really get what I want. What I want is when I click on a menu item, the sub-menu opens and activate the first sub-menu item.
I found an example: http://inthe7heaven.com/fb-john-doe/dark/
The photo section. I tried to replicate that, but I think the sub-menu is connected to the filtering function of the photogallery.
Can anybody give me some guidance in this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services</li>
<li class="photos">
Photos
<div id="filter" class="category_filter_list">
<span class="active_link" id="all">All</span>
<span id="cookies">Cookies</span>
<span id="bread">Bread</span>
<span id="baking">Baking</span>
</div>
</li>
<li class="">Classes</li>
<!--<li class="">Testimonials</li>-->
<li class="">Contact</li>
</ul>
</nav>
CSS
nav {
position: absolute;
z-index: 999;
right: 0;
top: 0;
width: 158px;
height: 600px;
display: block;
overflow: hidden;
behavior: url(js/PIE.htc);
}
nav.on_caption {
background: rgba(20,11,19,.6);
-pie-background: rgba(20,11,19,.6);
}
nav.on_caption a {
color: #d0ced0;
}
nav.off_caption {
background: rgba(20,11,19,.08);
-pie-background: rgba(20,11,19,.08);
}
nav.off_caption a {
color: #524b51;
}
nav a {
font-size: 1.143em;
text-transform: uppercase;
}
nav > a {
padding-left: 24px;
}
ul.pagination {
margin: 0;
padding: 0;
padding-bottom: 8px;
list-style:none;
}
ul.pagination li {
margin: 0px 0px 0px 0px;
clear: both;
padding: 8px 10px 0px 24px;
list-style: none;
}
ul.pagination li:first-child {
padding-top: 25px;
}
nav > a:hover,
nav ul.pagination li a:hover,
nav ul.pagination li.current a {
color: #90705B;
}
So I got this code based on the website I provided above. I want the same effect as in the photo section only then for a normal menu item that is not connected to a filter. That is, when the menu item is clicked, the menu gets extended with the sub-menu and the page goes to the first item in the sub-menu. In addition, the sub-menu item gets active.
I managed to get the sub-menu expand and collapse in jsfiddle using a tree-menu. I tested it in jsfiddle and there it works. However, it doesn't work in my website. The menu doesn't expand. The website I am using it in is a single page website. So the menu items are pointing to a section on the page. So, I guess that my href="sub-1" is not working because it's pointing at the 3rd section of the page.
Is there a simple work-around for this? I don't need any fancy jquery effects, it just needs to open.
Furthermore, when the parent item is clicked, the sub-menu needs to expand and needs to activate the first sub-item. How can I do this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
.pagination > li ul:target {
display: block;
}
Made some progress.
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
jQuery
jQuery(
function($)
{
$('.pagination a').click(function(){$(this).next('ul').toggle();});
}
);
This works now. When I click the menu item, the sub-menu gets expended. However, how do I let the sub-menu collapse again when another menu item is clicked? And how do I let the page automatically go to the first sub-menu item by default when the menu item is clicked?
I'm trying to build a drop-down menu using CSS, and I've successfully hidden the drop down menu, but haven't been able to make it reappear. I'm pretty sure that the problem is with the :hover tag, which I've taken out of the css here because I haven't been able to make it work. Help with the CSS? PLEASE? Desperate.
HTML Code:
<div id="navigation">
<ul id="menu">
<li class="menu">Home</li>
<li class="menu">About Us</li>
<ul class="sub_menu">
<li>Our Mission Statement</li>
<li>How Funds Are Spent</li>
<ul class="sub_sub_menu">
The Founders
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</ul>
<li class="menu">What We Do</li>
<ul class="sub_menu">
<li>T-Shirt Designs</li>
<li>Future Design Ideas</li>
<ul class="sub_sub_menu">
Fact Sheets
<li>How Our Fact Sheets Work</li>
<li>Fact Sheet 1</li>
</ul>
</ul>
<li class="menu">Media</li>
<li class="menu">Contact Us</li>
</ul>
</div>
CSS is as follows:
ul {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 0px;
padding-bottom: 0px;
}
li.menu {
display: inline
}
a:link, a:visited {
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
background-color: #B4B7BD;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 20px;
padding-left: 20px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #B4B7BD
}
ul.sub_menu li {
position: relative;
display: none;
width: 100%;
}
ul.sub_sub_menu {
position: relative;
display: none;
}
ul.sub_sub_menu li {
position: relative;
display: none;
width: 100%;
left: 100%;
}
HTML issues
First of all
<ul class="sub_sub_menu">The Founders
It's illegal to have text inside an unordered list tag, if this is meant to the the title of the list, then the title needs to be the text/link in the list item that the unordered list is nested inside of.
Also, you've done this several times:
<li class="menu">About Us</li>
<ul class="sub_menu">
<li>Our Mission Statement</li>
<li>How Funds Are Spent</li>
</ul>
where your code needs to be:
<li class="menu">About Us
<ul class="sub_menu">
<li>Our Mission Statement</li>
<li>How Funds Are Spent</li>
</ul>
</li>
You can see, the unordered list is nested properly in the second example, however in the first on it's not, causing you issues.
Those are the HTML problems I think, now to the css.
CSS issues
You should only have to add code to your css to make that work, here is an example of how to make the first submenu show up when you rollover a menu item.
li.menu:hover ul li {
display: block;
}
Just repeat that for the various sub & sub-sub menues you have.
The last thing is your use of selectors is a little sketchy, if you have ".sub_menu" as a class, then you don't need to prefix it with the element type unless multiple types of elements with the class and you want to select a single one, which is something I can't see you doing with your site, so instead of:
li.menu
ul.sub_menu
ul.sub_sub_menu
just use the class as a selector:
.menu
.sub_menu
.sub_sub_menu
This practice is faster for rendering in modern browsers, and clearer to read in many ways.
And there you go! it should all work nicely now.