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.
Related
So i'm having a huge issue with my navigation. I'm trying to add a drop down menu but no matter what I try its not working out. Below is my current HTML/CSS code and if you have any idea how to fix it please help!! I also attached a picture of what i'm actually trying to make it look like.
Here's the HTML
<div class="logo"><img src="images/original/xlablogoheader.gif" width="auto" height="130"/><span> experimental social science laboratory</span></div>
<div class="menu">
<ul>
<li>About
<ul>
<li>Mission</li>
<li> Staff</li>
</ul>
</li>
<li>Participants
</li>
<li>Researchers
</li>
<li>Connect
</li>
</ul>
</div>
</div>
Here's the CSS
/* Menu */
.menu{float:right; padding:0 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Source Sans Pro', sans-serif;color:#fff; font-size:16px;}
.menu ul li.selected a{color:#000;}
.menu ul li a:hover{color:#000;}
.menu ul ul { display: none; position: absolute; top: 25px }
.menu ul li:hover > ul { display: inherit; color:#000;}
I have modified your code, a little bit, by adding position: relative; to menu class, also some other minor changes, so it works, please check this https://jsfiddle.net/ysmr364m/
I have a menu that is made up of ul and li the list items nest SVGs as the items that will show up in the menu. inside the first ul, li nested another ul,li that shows up on hover as a submenu, everything works fine but I want to create a gap filler around my SVGs in the item menu so that when I hover a little bit away from the image, the sub menu would still appear.
I searched that and find some ways involved using the pseudo class ::after, but did not manage to make it work
This is my code
<div id="menu">
<ul>
<li> <img src="this is just for code"/>
<ul>
<li> link</li>
<li> link2/li>
</ul>
</li>
<li> <img src="this is just for code"/>
<ul>
<li> link</li>
<li> link</li>
</ul>
</li>
the css is
#menu ul li{
width:auto;
height:2.5em;
list-style:none;
float:left;
margin: 0em 20px 0em 20px ;
padding: 0px ;
cursor:pointer;
justify-content:space-between;
#menu ul ul li{
float:none;
width:100%;
height:auto;
padding: 1em 0;
text-align:center;
#menu ul li:hover > ul{
display:block; }
#menu ul li img{
width:inhrtit;
height:inherit;
margin: 0 0 60px 0;
position:relative;
bottom:0.6em;
}
#menu ul li:hover > ul::after{
width:auto;
height:2.5em;
padding:0px 100px;
margin: 90px;
position:absolute;
right:70px; left:90px;
pointer-events: none;
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}
#menu ul li:hover > ul::after {
pointer-events: auto;
}
Sorry my code is lousy. as the first question I hope this is not an enough dump one.
Since you're looking to increase the hover area of <li> elements, you can add padding to them.
For example, below is an example of using padding to increase the clickable area. Increasing hover area is similar.
https://jsfiddle.net/gazg1yuy/
I have a navigation menu with this style. The menu is perfect on Chrome, but other browsers and some Firefox versions, the menu shows up as 2 lines. I cannot get this line of CSS "padding: 0 0.73em;" to work on all browsers.
.mainnav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.mainnav ul li {
float:left;
}
.mainnav ul li a:link,.mainnav ul li a:visited {
display:block;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-color:#B79527;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
margin:0;
padding: 0 0.73em;
height: 28px;
line-height: 28px;
position:relative;
white-space:nowrap;
}
.mainnav ul li a:hover,.mainnav ul li a:active {
background-color:#9A7C1C;
}
#firstmenu {
background:#7A4AAD;
padding-left: 6px;
}
Here is the HTML
<div class="mainnav">
<ul>
<li id="firstmenu">Home</li>
<li>Group News</li>
<li>About us</li>
<li>Vision Message and Mission</li>
<li>Group Activity</li>
<li>Chairman's Message</li>
<li>Jobs</li>
<li>Contact us</li>
</ul>
</div>
Even Firefox gives me different results on different machines.
you are aware that in: .mainnav ul li a:link,.mainnav ul li a:visited there are double padding decalarations?
padding:4px;
padding: 0 0.73em;
You can combine those:
padding: 4px 0.73em;
Seems that the issue with the navigation list is that there is too much spacing in between them in combination with the amount of items.
I there are too much items, the normal behavior is the wrapping, you could decrease spacing, font-size to fix this.
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.
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.