I'm working on a css and html navigation menu on google sites but I can't seem to be able to 'rollover' my menu and have the sub menus show over the text that I have underneath? This is the link to the site and this is the css bit of the code I'm using for it but I really don't know how to go about this.
<style media="screen" type="text/css">
#primary_nav_wrap
{
width: 100%;
float: left;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
}
#primary_nav_wrap ul
{
list-style: none;
width: 500px;
height: 500px;
margin: 0 auto;
padding: 0;
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
</style>
I've been copying and pasting mostly for css and then trial and error but i would like to be able to copy and paste this in every single one of my pages (in the google sites html box gadget) and just treat it as a fixed menu bar - is that possible?
thanks in advance!
Looking at your CSS here
#primary_nav_wrap ul
{
list-style: none;
width: 500px;
/* height: 500px; */
margin: 0 auto;
padding: 0;
}
Commenting out the line I have above seems to fix the problem of the nav bar pushing your text aside.
Related
I have created my first master page so bear with me if this is a dumb question. One of my menu drop down lists within the master page is longer than the viewable page, so some of the items in the drop down list are cut off at the bottom of the page. How can I make the drop down list have the ability to scroll through it so I can see the entire list.
nav{
top:0;
left:0;
position:fixed;
width:100%;
background-color:rgba(0,0,0,0.6);
}
nav ul{
float:left;
padding:0;
margin:0;
position:relative;
list-style:none;
}
nav ul li{
display:inline-block;
float:left;
position:relative;
}
nav a{
display:block;
padding:3px 10px;
color:white;
font-size:17px;
font-weight:bold;
text-decoration:none;
font-family:Arial;
}
nav a:hover{
background-color:white;
color:gray;
}nav ul ul{
display:none;
position:absolute;
width:450px;
top:26px;
}
nav ul li:hover>ul{
display:inherit;
}
nav ul ul li{
float:none;
display:list-item;
position:relative;
background-color:rgba(0,0,0,0.6);
}
nav ul ul ul li{
position:relative;
left:450px;
top:-26px;
}
.toggle, [id^=drop]{
display:none;
}
#media all and (max-width:600px){
.menu{
display:none;
}
.toggle{
display:block;
color:white;
background-color:rgba(0,0,0,0.6);
text-decoration:none;
padding:20px;
}
.toggle:hover{
background-color:white;
color:dimgray;
}
#logo{
display:block;
float:none;
}
[id^=drop]:checked+ul{
display:block;
}
nav ul li{
display:block;
width:100%
}
nav ul ul{
float:none;
position:static;
}
nav ul ul ul{
float:none;
position:absolute;
}
}
One option would be to set via CSS a maximum height of the container (max-height : number [%, PX, VH] ) of dropdown and specify an overflow / scrolling (overflow-y : [ scroll|auto ] )to get to the bottom of the items. For example:
.nav ul { max-height:100%; overflow-y: auto; }
You can adjust Max-Height with %, PX, VH .. or whatever suites your specific project's use case.
Another option could be to introduce Columns in the dropdown as described here:
How to fix a dropdown menu that extends past bottom of page
I figured it out. To have a scroll bar in the sub menu drop list I needed to add nav ul ul ul and alter the nav ul ul ul li see below;
top: 0;
left: 0;
position: fixed;
width: 100%;
background-color: rgba(0,0,0,0.6);
}
nav ul {
float: left;
padding: 0;
margin: 0;
position: relative;
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
position: relative;
}
nav a {
display: block;
padding: 3px 15px;
color: white;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial;
}
nav a:hover {
background-color: white;
color: gray;
}
nav ul ul {
display: none;
position: absolute;
width: 300px;
top: 26px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
float: none;
display: list-item;
position: relative;
background-color: rgba(0,0,0,0.6);
}
nav ul ul ul {
display: none;
position: absolute;
left: 300px;
top: 0px;
max-height: 1000%;
overflow-y: auto;
}
nav ul ul ul li {
float: none;
display: list-item;
position: relative;
}
.toggle, [id^=drop] {
display: none;
}
#media all and (max-width:600px) {
.menu {
display: none;
}
.toggle {
display: block;
color: white;
background-color: rgba(0,0,0,0.6);
text-decoration: none;
padding: 20px;
}
.toggle:hover {
background-color: white;
color: dimgray;
}
#logo {
display: block;
float: none;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%
}
nav ul ul {
float: none;
position: static;
}
nav ul ul ul {
float: none;
position: absolute;
}
}```
I just tried to remove the MagicLine that was built into my Wordpress theme by taking out the CSS code that I'll put below. It worked and the line is gone but now my navigation is all jumpy as you can see at the site: http://sheisbiddy.com/home/ Is there a better way to remove the line (I can't seem to find it in the piles of code that came with the theme) or anyway to get the menu back to normal? Thanks!
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left: 0; display: none; }
This is what is left for the navigation CSS:
#header {height: 100px; padding-top: 20px; margin: 0 auto; }
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation {float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:inline; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:inline; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:inline; padding:0; }
#navigation li:hover ul { display:inline; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
you have an errors in you CSS which causes the navigation to behave this way...
in style.dynamic.php file :
Lines : 94,96,104
#tagline { background-color:; }
#navigation ul li { padding-bottom:px; }
#navigation ul li a { padding-top:px; }
I am creating a personal website for my programming class and I'm having trouble having my "li" tags items drop down, but instead their going off to the right. For example I hover over my "li" tag to have my drop down "li" items drop down. But instead they drop down and go to the right. I want them to go straight down. Any help?
Here is the CSS (And yes I know that some of my CSS is repeated and unnecessary) :
#nav {
background-color:#222;
margin:-15px;
margin-left:230px;
margin-right:230px
}
#nav_wrappper {
width: 960px;
margin: 0 auto;
text-align:left;
}
#nav ul {
list-style-type: none;
text-align:center;
margin: 0 auto;
position: relative;
display:inline-block;
width:100%;
}
#nav ul li {
display: inline-block;
position:relative;
width:33%;
float:left;
}
#nav ul li:hover {
background-color:#333;
}
#nav ul li a,visited {
color:#ccc;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration:none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul {
display:none;
position: absolute;
background-color:#333;
border: 5px solid #222;
border-top:0;
margin-left: -5px;
min-width:160px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a, vistited{
color:#ccc;
}
#nav ul ul li a:hover {
color:#099;
}
I have a simple menu that when hover it will have a drop down menu. The code is working when testing in Fiddle but not working on IE when run the whole page locally. Can anybody help
(here's my code at fiddle)[http://jsfiddle.net/bACbW]
<DIV align="left" id="floating-menu"><FONT class="subheading">
<ul class="dropmenu">
<li>MAIN MENU
<ul class="dropmenu">
<li>WELCOME</li>
<li>PERSONAL INFORMATION</li>
</ul>
</li>
</ul>
</FONT></DIV>
general.css
/* All UL */
#floating-menu ul {
list-style-type: none;
width: auto;
height: 30px;
background: #FF0040;
}
/* All LI */
#floating-menu ul li {
padding: 5px 10px;
height: 30px;
position: relative;
}
/* First Level LI */
#floating-menu>ul>li {
float: left;
height: 30px;
line-height: 27px;
text-aligh: center;
color: #9c9c9c;
}
#floating-menu li ul {
display: none;
position: absolute;
left: 0;
width: 200px;
}
#floating-menu li:hover ul {
display: block;
}
#floating-menu li li {
border-bottom: 1px solid #ffffff;
}
#floating-menu li li:hover {
background: #5e8ce9;
}
.dropmenu {
_zoom:1;
}
.dropmenu:after {
content: "";
clear: both;
display: block;
}
Check the jsFiddle link here and below corrected CSS. Also tested in Firefox, chrome, and ie 7, 8 and 9. It working properly.
#floating-menu {
width:940px;
padding:10px;
*padding:5px 10px;
margin:0 auto;
border:1px solid green;
background-color:#3D3A40;
border:8px solid #fff;
}
#floating-menu ul {
list-style-type: none;
line-height:30px;
background: #FF0040;
}
#floating-menu ul li {
position:relative;
display:inline-block;
*float:left;
}
#floating-menu ul li a {
color:#fff;
text-decoration:none;
display:block;
padding:0 20px;
cursor:pointer;
}
#floating-menu ul li:hover a {
color:#fff;
background-color:#5e8ce9;
cursor:pointer;
}
#floating-menu ul li ul {
display:none;
position:absolute;
left:0;
top:30px;
background-color:#5e8ce9;
width:200px;
line-height:18px;
}
#floating-menu ul li ul li {
border-bottom:1px solid #91b3f7;
display:block;
*float:none;
}
#floating-menu ul li ul li a {
color:#fff;
background-color:#0066FF;
cursor:pointer;
padding:5px 10px;
}
#floating-menu ul li ul li a:hover,
#floating-menu ul li ul li a.active {
color:#fff;
background-color:#0000FF;
}
#floating-menu ul li:hover ul {
display:block !important;
}
.dropmenu {
_zoom:1;
}
As I said in comments, your code works fine in IE9.
The reason, press F12 to get developer tools and change the document type.
As you said it is in Quirks mode
!-- Force IE to use the latest version of its rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
By telling IE to use the latest version of its rendering engine in your page.
Incase if your user has only IE8 browser? This will certainly fails.
You can check this in MSDN Library.
Hope you understand.
I'd like to have my navigation menu on my site span the width evenly. Here is an example of what I'm trying to accomplish, notice how the links are spaced evenly and stretch the entire width of the navigation bar.
I'm not exactly sure what code to use to accomplish this. I tried margin:auto but that didn't seem to work.
Here is the CSS that I have:
.mainNav{
height:30px;
padding-bottom:0px;
margin:0 !important;
position: relative;
border-top: 1px #d5d5d5 solid;
border-bottom: 1px #d5d5d5 solid;
}
.mainNav a {
font-size:16px;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
transition:none;
position: relative;
}
.mainNav ul {
list-style-type: none;
list-style-image: none;
}
.mainNav li {
float:left;
margin: 0 auto;
position: relative;
list-style-type: none;
list-style-image: none;
}
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
.mainNav li ul {
display: none;
margin:0 !important;
}
.mainNav li:hover > ul, .mainNav li.hover > ul {
display: block;
position: absolute;
top: 35px;
left: 0;
z-index: 1000;
width: 180px;
}
.mainNav li > ul {
height:auto;
width: auto;
background: #fff;
border:1px solid #efefef;
padding:0;
}
.mainNav li > ul li {
width:180px;
padding: 0;
position: relative;
height:35px;
border-bottom:1px solid #efefef;
}
.mainNav li > ul li:last-child{
border-bottom:none;
}
.mainNav li > ul li a {
text-transform:none;
height:22px;
padding: 5px 10px 0px 15px;
text-align: left;
font-size: 13px;
line-height:25px;
color:#333;
}
.mainNav li > ul li a:hover {
border:none;
}
.mainNav li ul li:hover > ul, .mainNav li ul li.hover > ul {
display: block;
position: absolute;
top:0;
left: 180px;
z-index: 0;
width: 180px;
}
If you turn off javascript and reload that wordpress theme that you want to replicate, you'll notice that the styling breaks.
That is because the margin's set on the list items to space them out evenly, is calculated using javascript and then applied.
You could write a javascript solution to style your list items or a quick fix would be to hard code the widths of the list items, e.g:
Change your current block of CSS:
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
To the following:
.mainNav li a {
text-transform:uppercase;
text-align: center; /*added*/
width: 117px; /*added*/
padding:0; /*edited*/
display:block;
/*padding-bottom:13px;*/ /*removed*/
}
It looks fixed to me. Screenshot of your site in firefox, with applied styles seen in firebug: