Below is the css for my menu
#menu
{
position: absolute;
left: 170px;
top: 92px;
background: #336699;
float: left;
z-index:50;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
width: 9em;
float: left;
}
#menu a, #menu h2
{
font: bold 11px/20px arial, helvetica, sans-serif;
display: block;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 4px 3px;
}
#menu h2
{
color: #fff;
background: #336699;
text-transform: uppercase;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
}
#menu a
{
color: #fff;
background: #79A3CF;
text-decoration: none;
}
#menu a:hover
{
color: #a00;
background: #fff;
}
#menu li
{
position: relative;
}
#menu li ul li
{
position: relative;
width: 12em;
}
#menu ul ul
{
position: absolute;
z-index: 500;
}
#menu ul ul ul
{
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul
{
display: none;
}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul
{
display: block;
}
Here is my html design for the menu. It is a horizontal menu with dropdown submenus
<div id="menu">
<ul>
<li><h2>Computers</h2>
<ul>
<li>subitem
<ul><li>subitems</li>
</li>
<li>submitem</li>
<li>submitem</li>
</li>
<li><h2>Network</h2>
<ul><li>subitems</li>
</li>
</ul>
</div>
I am using the minified version of the whatever hover script. Checked few posts here on this issue but couldn't solve the problem. The submenus are not appearing on IE6 and IE7. I trid adding
<!--[if lt IE 8]>
but no results...
Your HTML is poorly formed. ** indicates additions.
<div id="menu">
<ul>
<li><h2>Computers</h2>
<ul>
<li>subitem
<ul><li>subitems</li>**</ul>**
</li>
<li>submitem</li>
<li>submitem</li>
**</ul>**
</li>
<li><h2>Network</h2>
<ul><li>subitems</li>**</ul>**
</li>
</ul>
</div>
One good way to check for poorly formed html and other html problems is to validate your html in the w3c validator here.By using the validator to make sure my html is compliant, I can usually weed out browser discrepancies issues pretty easily.
Related
I have a dropdown menu that is working well except for one minor bug that I cannot solve.
The first dropdown menu item appears normally. However, the second dropdown menu item is shifted slightly to the right. I am guessing that the margin-right that I set to the link caused the dropdown menu to shift slightly to the right. If that is the case, what can I do to go around the problem?
It's a simple nav menu that sets the position of the dropmenu item to absolute, and is hidden by the parent element's overflow:hidden feature. On hover, the dropdown menu is brought into view with overflow:visible.
The live site is here -> nav menu
CSS
#mainMenu {
position: relative;
}
#mainMenu ul {
list-style: none;
float: right;
background-color: #FFFFFF;
}
#mainMenu ul li {
position: relative;
display: inline;
float: left;
/*padding-right: 1.5em;*/
font-size: 1.2em;
zoom:1;
overflow: hidden;
}
#mainMenu>ul>li {
line-height: 2em;
}
#mainMenu ul li:hover {
overflow: visible;
}
#mainMenu ul li a {
float: left;
text-decoration: none;
color: black;
padding: 0 1em;
}
#mainMenu>ul>li:last-child a {
padding:0.4em 1em 0.4em 1em;
border-radius:4px;
background-color: #00b200;
color: #FFFFFF;
}
#mainMenu ul li a:hover{
text-decoration: none;
color: rgb(42, 160, 239);
}
#mainMenu ul ul{
position: absolute;
top: 2em;
left: 60%;
width: 10em;
margin-left: -3em;
height: auto;
border: solid #CCC;
border-width: 0 1px 1px;
}
#mainMenu ul ul:first-child{
padding-top: 2em;
}
#mainMenu ul ul li,
#mainMenu ul ul a {
display:block;
float:none;
border:0;
box-shadow:none;
text-align:center;
font-size: 1em;
padding: 0.4em;
text-align: left;
}
#mainMenu ul ul li:first-child {
border-top:1px solid rgb(72, 147, 196);
}
#mainMenu ul ul li {
border-top: 1px solid #e9e9e9;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#F2F6FA;
color:#333;
}
HTML
<div id="nav-row">
<h1>
<a href="\">
Corporate Site
<span></span>
</a>
</h1>
<div id="mainMenu">
<ul>
<li>About
<ul>
<li class="company">Company Profile</li><li class="team">
The Team</li><li class="linsux">
Pricing Packages</li>
</ul></li>
<li>Services
<ul>
<li class="webDesign">Websites</li><li class="Emails">
Landing Pages</li><li class="Logos">
Logos</li>
</ul></li>
</li>
<li>Case Studies</li><li>
Blog</li><li>
Contact</li><li>
Free Web Analysis</li>
</ul>
</div>
</div>
It because you use to indent the submenu % of parent width which isn't the same. margin-left: -3em is a constant.
Use, for example:
left: -10px; /* I see the first submenu cca. 10px before the parent LI */
margin-left: 0;
Not sure why you indent by 60% and the move the submenu back using -3em.
try the following :
#mainMenu ul ul {
left: 39% !important;
}
Or
#mainMenu ul ul {
left: 0;
margin-left: 0;
}
I have been asked to look at this site http://www.edowa.org.au/ but can't find the problem.
The second level menu items are aligned correctly in IE10.0.5 and FF35.0.1 but not in Chrome (latest version). In Chrome the second level menu items are pushed to the right.
Here is the CSS
/* MAIN NAVIGATION - TABS
----------------------------------------- */
#nav {
clear:both;
width: 900px;
height: 29px;
margin: 0 auto;
padding:5px 20px 0 20px;
}
#nav ul {
width: 900px;
display: inline-table;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
}
*:first-child+html #nav li {
float: left;
}
*html #nav li {
float: left;
}
#nav li a {
border: 0;
display: block;
font-weight: bold;
font-size: 14px;
line-height: 29px;
color: #59523f;
text-decoration: none;
}
*:first-child+html #nav li a {
padding:0 33px;
}
#nav li a.current,
#nav li a:hover {
color: #FFFFFF;
background: url(../images/li-bg-hover.jpg) repeat-x;
}
/*_________second level menu__________*/
#nav li ul {
position: absolute;
z-index: 20;
width: 175px;
height: auto;
margin: 0;
padding: 0;
left: -999em;
}
#nav li ul li {
margin: 0;
padding: 0;
width: 175px;
min-height: 31px;
display:block;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: auto;
}
*:first-child+html #nav li:hover,
*:first-child+html #nav li li:hover,
*:first-child+html #nav li.sfhover,
*:first-child+html #nav li li.sfhover {
left: auto;
position: static;
}
#nav li ul li a {
padding: 0 10px;
display: block;
width: 175px !important;
line-height: 31px;
height:auto;
font-weight: normal;
font-size: 12px;
text-align: left;
color:#d6d4af;
background: url(../images/li-li-bg.png) repeat-x;
}
#nav li ul li a:hover {
color: #FFFFFF;
background: url(../images/li-li-bg-hover.png) repeat-x;
}
Here is the html
<div id="nav">
<ul>
<li><a href="/" class="current" >Home</a></li>
<li><a href="/meet-the-edo/" class="link" >Who We Are</a></li>
<li><a href="/services/" class="link" >What We Do</a>
<ul>
<li><a href="/services/legal-advice-2/" >Legal Advice</a></li>
</ul>
</li>
<li><a href="/discover/" class="link" >Discover</a>
<ul>
<li><a href="/discover/publications/" >Publications</a></li>
<li><a href="/discover/factsheets/" >Factsheets</a></li>
<li><a href="/discover/newsletters/" >Newsletters</a></li>
<li><a href="/discover/archive/" >Archive</a></li>
<li><a href="/discover/e-bulletins/" >E-Bulletins</a></li>
<li><a href="/discover/community-legal-education/" >Community Legal Education</a></li>
</ul>
</li>
<li><a href="/participate/" class="link" >Participate</a>
<ul>
<li><a href="/participate/join/" >Join</a></li>
<li><a href="/participate/donate/" >Donate</a></li>
<li><a href="/participate/volunteer/" >Volunteer</a></li>
<li><a href="/participate/jobs/" >Jobs</a></li>
</ul>
</li>
<li><a href="/links/" class="link" >Links</a></li>
<li><a href="/contact/" class="link" >Contact</a></li>
Any advice much appreciated.
Try changing your li left: auto; to left: 0; and add position: relative; to #nav li. Like this:
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
position: relative; /*Added*/
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0; /*Added*/
}
I've created a fiddle here (added colors for testing purposes).
I think it is a little mess within absolute positioning and "auto" value.
Please, try changing the following:
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
position: relative; /* new line */
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0; /* changed value */
}
It should do it on all major browsers.
#nav{
float : right;
/* or float = left */
}
I have a dropdown menu on my website, and its acting buggy, the dropdown works, but it shifts my whole website when its hovered over.
code pen http://codepen.io/anon/pen/uaFDj
#nav {
}
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
#nav ul>li:hover>ul {
top:initial;
}
my html
<div id="nav">
<ul>
<li>Home</li>
<li>Categories
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>About us</li>
<li>Profile</li>
<li>My Listings</li>
<li>Get Verified!</li>
<li>Log out</li>
<li class="active">
<div id="searchbar">
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>
</div>
it only bugs when its in full screen without ay sidebar stroller. thanks for the upcoming help.
Thank you for the upcoming help and support from everyone.
Without even looking at your code I can tell you why. The width of the dropdown is moving some margin to the right causing the search bar and probably anything else underneath the dropdown to move right.
Just make a <ul> list-style-type: none; with <li> display: inline or block;
Also you're not setting a width to anything but the search bar, which might be another cause.
Try setting a width to your nav.
Hey now just define some css as like this
#nav ul li {
position:relative;
}
#nav ul > li ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
Give max width for #nav and width 100%
#nav{
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
max-width: 858px;
padding: 0;
width: 100%;
}
so that it won't move anymore.
DEMO
why are you giving top:100%;
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; display:none;
}
#nav ul>li:hover>ul {
display:block;
}
UPDATE : to keep a highlighted DEMO
#nav ul li:hover > a{
background-color:#333;
}
I'm creating a drop down menu, the top level list item will display a username.
I have a bit of an issue because I want the dropdown menu to be the same width at the top level list item being hovered over.
However, if I set ul li ul li to width 100%, it takes 100% of the overall container, not of the ul above it. I think because ul ul's are position absolute?
Any ideas how I can make the drop down menu's the same width as the parent list item?
The page can be seen here.
and here's the HTML
<ul>
<li><span aria-hidden="true" data-icon="a"> A long name here
<ul>
<li>View Profile</li>
<li>Edit Profile</li>
<li>Settings</li>
<li>My Payments</li>
</ul>
</li>
<li> <span aria-hidden="true" data-icon="c"> Online</li>
<li> Log Out</li>
</ul>
CSS
.head-link ul ul {
display: none;
}
.head-link ul li:hover > ul {
display: block;
}
.head-link ul {
list-style: none;
position: relative;
display: inline-table;
}
.head-link ul li {
float: left;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
height: 2em;
width: auto;
padding: 0.5em 0.98em;
}
.head-link ul li:hover {
background: #ffffff;
}
.head-link ul li:hover a {
color: #434343;
border-bottom: none;
}
.head-link ul li a {
display: block;
color: #ffffff;
text-decoration: none;
}
.head-link ul ul {
background: #ffffff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 99%;
left: 0;
text-align: left;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
padding-bottom: 0.8em;
padding-top: 0.5em;
box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3);
}
.head-link ul ul li {
float: none;
position: relative;
padding: 0em;
}
.head-link ul ul li a {
padding: 0.5em 1.24em;
color: #434343;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.head-link ul ul li a:hover {
background: #ffffff;
text-decoration: underline;
}
.head-link ul ul ul {
position: absolute;
left: 100%;
top:0;
}
Here's how I made it look like this:
Just modify these rules:
.head-link ul li {
position: relative;
... /* Keep all current rules */
}
.head-link ul li ul {
width: 100%;
... /* Keep all current rules */
}
My drop down menu is only showing one of the sub-menu drop down items. I know my css has something wrong with it, but I cannot figure it out. I have played around with various code and I cannot seem to get it. There is only one sub menu. Can someone point me in the right direction?
/** MENU */
#menu {
overflow: visible;
border-top: 1px solid #F78F1E;
color: #FFF;
background: F78F1E;
background-color: F78F1E;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
background: #F78F1E;
padding: 0;
}
#menu a {
display:block;
background: #F78F1E;
padding: 10px 25px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 14px;
font-weight: 700;
color: #fff;
}
#menu a:hover, #menu ul li:hover a {
text-decoration: underline;
background-color: #F78F1E;
}
#menu .active a {
background: #F78F1E;
color: #fff;
}
#menu li ul {
overflow: visible;
position: absolute;
display: none;
margin:0;
padding:0;
}
#menu li:hover ul {
display: block;
overflow: visible;
}
#menu li ul li {
overflow: hidden;
float: none;
display: block;
z-index:1000;
}
#menu li ul li a {
overflow: hidden;
width: 100px;
position: absolute;
color: #fff;
z-index:1000;
}
#menu li ul li a:hover {
background: #F78F1E;
color: #fff;
z-index:1000;
}
Here is the html:
<div id="menu">
<ul id="menu">
<li class="active">Home</li>
<li>About Us</li>
<li>
Shop
<ul>
<li>Monogrammed Tees</li>
<li>Monogrammed Hats</li>
<li>Acrylic Jewelry</li>
<li>Trendy Tees</li>
</ul>
</li>
<li>Fonts</li>
<li>Wholesale</li>
<li>Contact Us</li>
<li>cart</li>
</ul>
</div>
</div>
Remove the position: absolute from #menu li ul li a selector and it will work.
See an example
Additional notes:
You defined 2 identical IDs (id="menu"), HTML standard requires unique IDs.
You closed 2 divs (</div>), but opened only one.
So many unnecessary CSS properties which doesn't affect on your design, but can harm in the future.
If you enter some padding at the bottom of the li then the sub menu items will display. In the example below I entered padding-bottom:45px
#menu li ul li {
overflow: hidden;
float: none;
display: block;
z-index:1000;
padding-bottom:45px;}
I hope this helps!