I trying to set up my nav so I have my list items and i have a list inside a list item (sub-menu) like so...
<style>
.headerNav{
color:#FFF;
margin:0 auto;
width: 1280px;
padding-top: 148px;
}
.headerNav ul{
list-style-type:none;
margin:0;
padding:0 0 0 8px;
}
.headerNav li{
float:left;
}
.headerNav ul a{
font-size:24px;
color:#FFF;
display:block;
padding:0 55px 0 0;
text-decoration:none;
text-transform:capitalize;
}
.headerNav ul a:hover{
color:#a40404;
text-decoration:none;
}
</style>
<div class="headerNav">
<ul>
<li>Home</li>
<li><a href="#" class='galleryNavToggle'>Gallery</a>
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</li>
<li><a href="#" class='galleryNavInfoToggle'>Info</a>
<ul>
<li>F.A.Q.</li>
<li>CV</li>
<li>Artist Bio</li>
<li>Video</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div><!-- headerNav -->
The problem is that the list items with a list inside have a massive width and I cant see my sub nav at all, any help would be greatly appreciated.
I've created a fiddle with your html and css and added a bit of css of my own to outline the sublist a bit better: http://jsfiddle.net/bymLV/
I removed float: left from the sublist, because this is what makes your list so extremely wide. That and the actual width of 1280px you are giving .headerNav.
Related
I am styling the navbar my simple side with the following code:
Html:
<div>
<ul class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/><br /><a target='_blank' href='https://postimage.org/'> </a><br /><br />
</ul>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>
CSS:
ul{
list-style:none;
display:inline;
}
li{
list-style: none;
display: inline;
width:100%;
padding: 10px;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
float:right;
}
As my snippet shows( https://jsfiddle.net/Wosley_Alarico/t3uhg5n1/1/ ). The logo is floated to the left and the menu to the right as I want. But the problem is that the menu went the top and would actually like it to be positioned to the bottom.
How can I actually make the menu go to the bottom instead and keep it floated to the right?
I can see few issues:
For 1st a tag there is no closing of it
You can remove 2nd a if you are not using
ul can't be used with li so, changed it to div or span
Remove float:right from navbar-right class it will come in the bottom of logo.
add a ul class with magin, padding 0
ul{
list-style:none;
display:inline;
margin:0;
padding:0;
}
li{
list-style: none;
display: inline;
width:100%;
padding:10px 10px 10px 0;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
}
<div>
<div class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/></a>
</div>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>
ul.navbar-right{
float:right;
position:relative;
bottom:0;
}
I have the following css vertical navigation menu I have done. There are up and down images for the parent category 30px high for rollover and separate up and down images for the second and third levels of the menu rollover at 25px high.
For each level, there is a different type of up and down images if there is no continuing category.
It works OK except for 3 areas that I have been struggling with for days now and can't seem to see where I have gone wrong.
The first is that the text for each level gets smaller and smaller for some reason and the second is that at the third level, all the images shown the up and down images as if there it a continuing category, and last but not least, when a category is selected in the first, second or third category, I can't seem to find a way to keep those links highlighted to show the user that they are in that area.
I hope someone is able to figure this out as I have been going crazy for days now. Thanks in advance.
Please find the current code below (in the image areas I have described what the images are for to understand what images I am using) :
The HTML:
<div id="nav">
<ul class="menu">
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
The CSS:
#nav {
float:left;
width:200px;
z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
display:block;
width:200px;
margin:0;
padding:0;
list-style-type: none;
}
#nav ul.menu > li {
float: left;
display:block;
width:200px;
height:30px;
font-size:0.9em;
line-height:2.2em;
margin-bottom:1px;
}
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
float: left;
display:block;
width:200px;
height:25px;
font-size:0.7em;
line-height:2.2em;
}
#nav li a {
display:block;
width:200px;
color:#FFF;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
list-style-type:none;
}
#nav ul.menu > li > a {
background: transparent url('../../parent-category-with-submenus.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a {
background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.menu ul ul li {
float: none;
list-style-type: none;
}
#nav li > ul {
display: none;
list-style-type: none;
}
#nav li:hover > ul {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:0px;
margin-left:192px;
}
#nav li:hover > ul.sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-40px;
margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-30px;
margin-left:198px;
}
Font Size
You font size gets smaller because you are using ems. An em is a relative unit. If you're base font size is 20px and you're using 0.75em then the font size of a child element whose parent used the base 20px font size would be 15px (20x0.75=15). Now a child of that child (grandchild) would start with the child's font size of 15px and it's font size would be 11.25px (15x0.75=11.25). I set the text to be 16px for all li in the jsFiddle below.
UP and DOWN images
I didn't bother figuring out the exact issue with this but you do have a lot of kruft in this part of your CSS. I would add a class to the li that has a sub-menu within it. Something like .has-sub-menu. Then target the anchor tags like so .menu > .has-sub-menu > a and .sub-menu > .has-sub-menu > a. Also see the jsFiddle below.
HTML
<div id="nav">
<ul class="menu">
<li>Home</li>
<li class="has-sub-menu">
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
</ul>
</div>
CSS
.menu > .has-sub-menu > a {
background-image: url(img-one.png);
}
.sub-menu > .has-sub-menu > a {
background-image: url(img-two.png);
}
Navigation Highlighting
This one cannot be done with CSS unless you add a class to each li or anchor tag. Something along the lines of the name of the page and then on each page add a body class of the same or similar name.
HTML
<!-- your code -->
<body class="products">
<!-- more of your code -->
<div id="nav">
<ul class="menu">
<li class="products">Products</li>
<li class="about">About</li>
<!-- more links -->
</ul>
<!-- more links -->
</div>
<!-- more of your code -->
</body>
In the example above we are viewing the products page. For the about page you would replace the class on the body tag with about. In the end this does not have to be added to the body tag but some other ancestor element. But the body tag is a nice clean solution and helps ensure that the class will be encapsulated within one another.
Then you could target the link like so with your CSS.
CSS
/* non-active */
#nav li {
color: white;
background-color: red;
}
/* active */
.products .products,
.about .about {
color: red;
background-color: blue;
}
If the above is not doeable then I believe you will have to do some light programming via PHP, ASP or whatever server side language you have available to you. You could also use JavaScript. You can also find answers to this with a simple StackOverflow search.
The fiddle below addresses all three issues with the solutions above. I also added a little jQuery so you can switch out and try the navigation highlighting.
http://jsfiddle.net/u2V8v/
Issue #1: The text gets smaller in the sub-menus because you have this rule
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
...
font-size:0.7em;
...
}
while the default for the first level items is
#nav ul.menu > li {
...
font-size:0.9em;
...
}
Either remove the font-size decalaration for the submenus or set the value to inherit
Issue #2
I couldn't test this since I don't have your images so I'm not sure if this is what's causing the problem but it seems you're missing the > a at the end of this CSS rule selector
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
...
}
Issue #3
To highlight the menu items you can just set a background color on the hover state, they will stay highlighted while the user is browsing sub-menus
#nav ul li:hover{
background:red;
}
I have some code that has the property display-inline. Due to this it displays the list horizontally. Now, I placed an image in my code and it appeared after the list. I wanted the image to be displayed below the list so I placed the list into a div but still its getting displayed next to the list. Here is the code,
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<img src="Book_Cover-465x540.png" />
CSS of list-nav:
ul#list-nav {
margin:40px;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:15px solid #fff;
}
Please help out. Thanks
Remove the float from a.
Also: what the heck is border-left:15px solid #fff;, didn't you mean left margin?
try this:
<div>
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<div style="clear:both"></div>
<img src="Book_Cover-465x540.png" />
Ive been trying to make the original dropdown into multi level for a site im working on. All of my attempts have failed (. For some reason i can only do "margin-right" to align the elements, and this causes some problems. I think it has something to do with the position attribute.
Here is my HTML:
<ol id="nav">
<li>Home</li>
<li class="dropdown_alignedLeft">
Products
<ul><li class="dropdown_alignedRight">
iPoP
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>iPoP - Network Solutions for Vessels</li></ul><li class="dropdown_alignedRight">
Cameras
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</li></ul><li class="dropdown_alignedRight">
BNWAS
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>BNWAS - Bridge Navigation Watch Alarm System</li></ul><li class="dropdown_alignedRight">
Lighting
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>Peli 2690 - Intrinsically Safe LED Head Lamp</li></ul><li class="dropdown_alignedRight">
Communication
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>Ex-Handy 06 - Intrinsically Safe Cell Phone</li></ul>
</ul>
<li class="dropdown_alignedLeft">
Customers
<ul>
<li>Maritime</li>
<li>Non-Maritime</li>
<li class="dropdown_lastItem">Regulatory Organizations</li>
</ul>
<li>Product Enquiry</li>
<li>Contact Us</li>
<li class="dropdown_alignedLeft">
Company
<ul>
<!-- <li>About Us</li> -->
<li>News</li>
<li class="dropdown_lastItem">Press Releases</li>
</ul>
</ol>
And my CSS:
#nav {
float:right;
margin:15px 0 0;
}
#nav li {
float:left;
}
#nav li a {
display:block;
font-family:"PT Sans","Helvetica Neue",Arial,sans-serif;
font-size:16px;
text-decoration:none;
color:#2B95C8;
padding:10px 20px 20px;
}
.dropdown_alignedLeft,.dropdown_alignedRight {
position:relative;
}
#nav .dropdown_alignedLeft>a,#nav .dropdown_alignedRight>a {
background:url(../images/dropdown_arrow_blue.png) no-repeat top right;
padding:10px 30px 20px 20px;
}
#nav .dropdown_alignedLeft:hover>a,#nav .dropdown_alignedRight:hover>a {
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:0;
-moz-border-radius-bottomleft:0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
color:#FFF;
background:#2378A1 url(../images/dropdown_arrow_blue.png) no-repeat bottom right;
}
.dropdown_alignedLeft ul,.dropdown_alignedRight ul {
display:none;
}
#nav .dropdown_alignedLeft:hover>ul,#nav .dropdown_alignedRight:hover>ul {
display:block;
z-index:100;
position:absolute;
top:50px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-left-radius:0;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
background:#2378A1;
padding:0 0 6px;
}
#nav .dropdown_alignedRight:hover>ul {
top:50px;
right:0;
text-align:right;
}
#nav li ul li {
float:none;
border-bottom:1px dashed #2B95C8;
margin:0 20px;
}
#nav li ul li.dropdown_innerTitle {
border:none;
font-family:"Helvetica Neue",Arial,sans-serif;
font-size:15px;
white-space:nowrap;
color:#C8DDE7;
margin:10px 20px 0;
padding:10px 0;
}
#nav li ul li.dropdown_lastItem {
border:none;
}
#nav li ul li a {
font-family:"Helvetica Neue",Arial,sans-serif;
font-size:13px;
color:#FFF;
white-space:nowrap;
padding:10px 0 9px;
}
#nav>li:hover>a,#nav li .current_page {
color:#2378A1;
background:url(../images/current_page_arrow_blue.png) no-repeat center bottom;
}
#nav li ul li a:hover {
color: #C8DDE7;
}
For a live version of the menu, please go here:
JSFiddle - Live Menu
You weren't closing a lot of your li tags and your submenu was just sort off flying off its container. Cleaned up your code and made too many modifications to list here:
http://jsfiddle.net/MmHSd/4/
http://purecssmenu.com/ Might help you out. Try downloading a list and taking a look at it. Deleting all the extra tags you have and take everything back to a basic list like this:
<ul>
<li>Element 1</li>
<li>Element 2</li>
<ul>
<li>
Element 2 Child 1
</li>
<li>
Element 2 Child 2
</li>
</ul>
and working back up to something a bit more complicated might help too.
Trying to make a drop down menu with css but it has some weird bugs in it. Here is the link for the site I'm working on.
http://shekinahgloryfire.com/?page=about
My CSS is like this:
#nav ul{float:left;margin-top:95px;list-style:none;padding-left:140px;}
#nav .first{border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px;}
#nav .last{border-radius:0px 10px 10px 0;-webkit-border-radius:0px 10px 10px 0; -moz-border-radius:0px 10px 10px 0;}
#nav ul li{float:left;border:solid #000;border-width:1px 0 1px 1px;background:black url('../images/navbg.gif');overflow:hidden}
#nav ul li:hover{background:#f68f1e url('../images/activebg.gif')}
#nav ul li a:link{text-transform:uppercase; text-decoration:none; font-family:serif; font-size:10pt; font-weight:bold; color:#fff; width:100px; height:40px; display:block; text-align:center; padding-top:10px}
#nav ul li a:hover{color:#000;text-decoration:underline;}
#nav ul ul{ position:absolute; }
And my mark up is like this:
<div id="nav">
<ul>
<li class="first"><a class="first" style="<?php if($page == "home") print "background:#f68f1e url('images/activebg.gif');color:#000";?>" href="?page=home">Home</a></li>
<li>About
<ul>
<li>Testimonies</li>
</ul>
</li>
<li>Resources</li>
<li>Videos</li>
<li class="last">Contact</li>
</ul>
</div>
If you are saying about spacing between the logo+nav and the actual content, then you need to decrease the height value in .header class of your stylesheet.
I figured it out. I just rewrote the whole navigation from scratch. Then I decided to do away with the dropdown and just put it on the side navigation.